How to trigger modal/popup on page first load - React

Question

When user enters the page I would like to have a modal pops up as the first thing with option to choose between USER and AGENT and based on that the content of the page will be updated.

At first, I need to figure out how to trigger the modal on page load and save the chosen option to cookie / localStorage.

I know there is a JavaScript function, something like this:

$(document).ready(function() {
  setTimeout(function() {
    $("#myModal").modal('show');
  }, 2000);

});

The code ^ above will trigger the modal when user is on page for 2 seconds, I would like to achieve the same logic just with react - thinking of useEffect could handle that ?

Also, I am using React Bootstrap, I know that component has some functions e.g onEnter function, but I am not sure if it is usable at all ?

React Modal I am using now that is triggered by button:

const [show, setShow] = useState(false); // trigger

        <Button variant="primary" onClick={() => setShow(true)}>
            Custom Width Modal
        </Button>

Modal itself:

            <Modal
                show={show}
                onHide={() => setShow(false)}
                dialogClassName="modal-90w"
                aria-labelledby="contained-modal-title-vcenter"
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Lorem Ipsum Dolor
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Row className="text-center justify-content-center">
                        <Col>
                            <Button>USER</Button>
                        </Col>
                        <Col>
                            <Button>AGENT</Button>
                        </Col>
                    </Row>
                </Modal.Body>
            </Modal>

You should not be using jquery with react. Post the component that you want this to take place in — Udendu Abasili, Apr 27 '21 at 14:46
I updated my post with the current modal I am having @UdenduAbasili — , Apr 27 '21 at 14:50

score 2 · Answer 1 · answered Apr 27 '21 at 14:53

2

Since you say you want the popup to show first you simple need to change this

const [show, setShow] = useState(true)

answered Apr 27 '21 at 14:53

Udendu Abasili

1,163
2
13
29

1

That's correct! Although this will be true for entering whatever page - I would like to use it only when the index page is loaded for the first time to user and after choosing an option (agent or user) it will be stored in cookie/localStorage so modal won't show up anymore even on index page, unless the storage is clear again – Apr 27 '21 at 14:56
so you want this to only open once and not to come up again if the storage current has the option chosen? – Udendu Abasili Apr 27 '21 at 14:59
Exactly that's what I would like to achieve. – Apr 27 '21 at 15:00
How many pages do you have currently? Is the modal on the main page with all of them linked? – Udendu Abasili Apr 27 '21 at 15:02
It was my fault - I added the modal to App.js - now I moved it only to Index page, so it is triggered only on index, but if I go to other page and come back to index, modal is triggered again – Apr 27 '21 at 15:04

score 1 · Answer 2 · answered Apr 27 '21 at 14:55

1

Try this

useEffect() with a second argument as an empty list will only be called once, when the component is mounted. You can also check the cookie just before calling setShow.

The below code also adds a delay of 2 seconds.

useEffect(()=>{
  setTimeout(()=>{
    setShow(true)
  }, 2000)
}, [])

answered Apr 27 '21 at 14:55

Ajith Gopi

1,509
1
12
20

Thank you @Ajith, but it has the same result as the post above you I commented. – Apr 27 '21 at 14:59
Have you revered the changes you made in last answer? Otherwise, the default is already true and this will make no change. – Ajith Gopi Apr 27 '21 at 15:00
When I tried your solution I setup my state for `false` – Apr 27 '21 at 15:02
As I mentioned, you need to set the cookie additionally and check if it's set before calling `setShow`. Call the function only if cookie not set. – Ajith Gopi Apr 27 '21 at 15:03
Here's how to set and retrieve cookies https://stackoverflow.com/a/43684059/5321660 – Ajith Gopi Apr 27 '21 at 15:04
so I will set the cookie in useEffect, correct ? – Apr 27 '21 at 15:06
Yes. If cookie not set: `setShow(true); set cookie`. – Ajith Gopi Apr 27 '21 at 15:08
setTimeout wouldn't be necessary in this case – Ajith Gopi Apr 27 '21 at 15:08

How to trigger modal/popup on page first load - React

2 Answers2