Close a modal when user clicks back button in browser React Js

Question

I am showing user a modal that takes over the entire screen if user is accessing the website on phone. A user tends to instinctively click the back button on their phone to go back to the previous screen instead of using the close button provided on the modal.

Is there a way to intercept the function that is triggered when a user clicks the back button? I want to close the modal when user clicks the back button on their phone, instead of having them redirect to the previous page.

I think you're looking for something like this https://stackoverflow.com/questions/39342195/intercept-handle-browsers-back-button-in-react-router — derFrosty, Aug 30 '22 at 09:21
@derFrosty it provides a partial answer. With this, I am able to execute some code before the user is redirected. However, I want to prevent user from redirecting and only close the modal. — Inaara Kalani, Aug 30 '22 at 10:58

Decelis · Answer 1 · 2022-08-31T08:05:06.497

Use the History API. An example on how to acomplish this is:

//listen for state changes
window.onpopstate = (event) => 
{
   if (!event.state.modalOpened)
   {
     closeModal()
   }
}

//change the actual page state so it contains the modalOpened property
window.history.replaceState({modalOpened: false})

function openModal(content) 
{
    //push new state, put the modal information in the state object, this will push a new state, when the user presses the back button, the browser will just trigger the onpopstate event, instead of going to the previous page
    window.history.replaceState({modalOpened: true})

    //this is any code you use to open your modal, for example
    ReactDOM.render(<Modal>{content}</Modal>, document.getElementById("modal-container")
}

class based component

There are many ways to aproach this, this is one of them, everything you need to make something that fits with your app is in the History API DOCS.

//listen for state changes
    window.onpopstate = (event) => 
    {
       if (!event.state.modalOpened)
       {
         updateModal(false, null)
       }
    }

function openModal()
{
//push new state, put the modal information in the state object, this will push a new state, when the user presses the back button, the browser will just trigger the onpopstate event, instead of going to the previous page
        window.history.replaceState({modalOpened: true})
        updateModal(false, <div>Modal content!</div>)
}

function updateModal(open, content)
{
   ReactDOM.render(<Modal open={open} content={content} />, document.getElementById("modal-container")
}

//change the actual page state so it contains the modalOpened property
    window.history.replaceState({modalOpened: false})

class Modal extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    //check the history to determine if we have to open or close the modal
    return <div className={"modal " + (props.open)? "show" : ""}><div className="modal-content">{props.content}</div><button onClick={() => window.history.back()}>OK</button></div>;
  }
}

Hi! Can you provide a solution for class based component? I am not sure how to use this. — Inaara Kalani, Aug 30 '22 at 10:11
It depends on how do you structure your app, I will try to give you another example later, but if you could provide some code so I can see how this could fit your app that would be great. — Decelis, Aug 30 '22 at 12:59

Close a modal when user clicks back button in browser React Js

1 Answers1