React Material UI delayed permission dialog

user_8178301 0
Viewed 1455

I am new to React and Material UI. What I am trying to do, is to create a simple permissions dialog (like usually we see on mobiles asking for privacy or location permissions, or like in Chrome on desktop)), which appears a few seconds after the home page is loaded. So that the user first sees the home page and then after about 2 seconds appears the permission dialog (as light box).

I've checked already the alert dialog example in the Material Ui docs which is great. What I am straggling with is how to:

  1. Display the dialog after a certain delay (let's say 2 seconds)
  2. Display it only once. Meaning that first time you enter the home page it is displayed, and that's it. Browsing through other site's pages would not show it again. (similar to chrome behaviour)

I would like to be able to do something like this:

(AlertDialog code by Material UI)

export default function Home() {
  return (
    <Container maxWidth="sm">
      <Box component="img" src="/logo.svg" pt="58px" />
      <Typography component="div" gutterBottom>
        Home page
      </Typography>
      <AlertDialog wait="2000" />
    </Container>
  );
}
material-ui react-hooks reactjs alert dialog
2 Answers

There are 2 easy ways to achieve what you want :

const [open, setOpen] = React.useState(false)

const openDialog = () => setTimeout(() => setOpen(true),2000)
const closeDialog = () => setOpen(false)

Or pass this prop to the dialog component:

TransitionProps={{
    style: {
        transitionDelay: 2000,
    }
}}

Both methods should do the job.

user_133572600

Eventually I solved it this way:

  1. Managing open/close of dialog - using setTimeout and useState, similar to what was suggested above, but the main difference is that the activation of the dialog is not triggered by button click, but rather by timeout from the first render of home page. This is controlled by react hook 'useEffect' which activates the timeout only once.
  2. Also, to address the issue of displaying the dialog only once per session, regardless of which page the user browses in, I used 'sessionStorage' to set dialog show flag.

Here's the code of 'Home' component:

export default function Home() {
  return (
    <Container maxWidth="sm">
      <Box component="img" src="/logo.svg" pt="58px" />
      <Typography component="div" gutterBottom>
        Home page
      </Typography>
      <AlertDialog />
    </Container>
  );
}

Here's the code of 'AlertDialog' dealing with the timeout:

export default function LocationAlertDialog() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    // check if the dialog already displayed
    if (sessionStorage.getItem("ShowAlertDialog") != "false") {
        // wait predefined milliseconds before changing the 'open' state of the dialog
        const delay = setTimeout(() => {
        setOpen(true);
        sessionStorage.setItem("ShowAlertDialog", false);
      }, WAIT_MILLISECONDS_TO_SHOW_DIALOG);
      // Cleanup timeout
      return () => clearTimeout(delay);
    }
  }, []);
 return (
 .......
)
}
user_81783010
Related