react-router-modal
Advanced tools
A simple way to handle showing modals with react-router version 4.
Install using yarn or npm.
npm install react-router-modal --save
yarn add react-router-modal
react-router-modal requires:
react-router-dom version 4
react & react-dom, version 15
ModalContainer contains all modals that are shown. Typically you will want to mount this just before your closing </body> tag.
Nothing will be rendered into the dom if no modals are current shown.
bodyModalOpenClassNameClass name to set on the <body> when a modal is mounted. Typically used to prevent default scroll behavior, etc.
Defaults to react-router-modal__modal-open
containerClassName
Class name for the modal container element. Note that this element is only rendered when at least one modal is shown.Defaults to react-router-modal__modal-container
backdropClassName
Class name for the modal backdrop element(s) that are show behind each modal.
Defaults to react-router-modal__modal-backdrop
modalClassName
Class name for the modal element(s) that wrap the modal content. Can be overridden by the className property on <ModalRoute /> or <Modal />
Defaults to react-router-modal__modal
ModalRoute attaches a component to a route.
The path to match. See react-router docs.
The component to render inside the modal when the path is matched.
Only match on exact route match. See react-router docs.
Properties to be passed to the component when the route is matched.
The react-router props location', 'history', and 'match will also be included.
If set, overrides the modalClassName property on the ModalContainer
When the route matches, the component will be shown inside a modal. If multiple routes match, the modals will be stacked based on the length of the path that is matched.
If you want to show a modal without a route, you can use this. Modals shown this way default to stacking on top of modals shown with ModalRoute.
The component to render inside the modal when the path is matched.
Properties to be passed to the component rendered inside the modal.
Controls the order the modals are stacked. Higher number means "on top".
If set, overrides the modalClassName property on the ModalContainer
Default css is included in css/react-router-modal.css. You can use this as a basis for your own modal styles.
FAQs
simple react router modal
The npm package react-router-modal receives a total of 13,131 weekly downloads. As such, react-router-modal popularity was classified as popular.
We found that react-router-modal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Malicious PyPI package ‘set-utils’ steals Ethereum private keys by exfiltrating them through blockchain transactions via the Polygon RPC.
Research
Security News
Malicious Go packages are impersonating popular libraries to install hidden loader malware on Linux and macOS, targeting developers with obfuscated payloads.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.