-
Notifications
You must be signed in to change notification settings - Fork 123
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Removing modal on page route change #143
Comments
Thanks @nik32 , we will consider this requirement. |
I would be very happy about this feature. Right now I have to remove all modals on a page via NiceModal.remove() in useEffect |
@supnate really sorry for troubling you with this... but any update regarding this? Actually, folks in our company wanted to go to production with this feature... that's why asking you. If I can provide any assistance from my end, please feel free to let me know |
Hi @nik32 , I'm just curious why page route changes when a modal is still visible, is that a common pattern in your app or just edge cases? |
Thanks @supnate for the reply! Basically the user can press the back button in the browser (while the modal is still open). He intended to go to the previous page but the modal doesn't belong to the previous page (thus our folks wanted that the modal should be closed on route change). We are using NiceModal on a lot of our pages so this is a common pattern. And thus you are right... the problem does equal to "when a component call NiceModal.show to show a modal, the modal should auto close when the component is unmounted."
With regards to it being a breaking change... while calling |
Hi @nik32 , Thanks for the explanation. What do you think of the solution of closing all modals while route change? |
@supnate thanks for helping us come up with a solution! This might work... but I need to give it a try first. In the solution... can you help me with a couple of doubts -
|
NiceModalContext's value is just a plain object record (id -> modal), you can use Object.keys or other API iterate them Here is my code: const location = useLocation(); // react-router-dom v5 API
const niceModalContext = useContext(NiceModal.NiceModalContext);
useEffect(() => {
Object.keys(niceModalContext).forEach((key) => {
NiceModal.hide(key);
});
}, [location.pathname, location.search]); I don't use modal.remove because the method would be called after modal's transition animation end in modal component |
Thanks @kainstar for the example! Every modal always has an id, it auto generates one internally if not given. |
Kudos for such a great library! It has really simplified working with modals
The modals don't get removed automatically on route change. Can this feature be added to NiceModal such that developers can configure (at the time of using the modal with
useModal
) to close the modal on route change.The text was updated successfully, but these errors were encountered: