An accessible modal component manager. ModalProvider does not create any UI of its own; it is intended to work with the modal UI components in this library such as Overlay. ModalProvider will handle opening and closing your UI component and manages focus, close on Escape, mask animation, and key accessible attributes.
There are three main steps to leverage ModalProvider:
The main export, ModalProvider, should be wrapped around your entire React application as near to the application root as possible. ModalProvider leverages React Context to expose the openModal and closeModal methods to your entire app.
In your html, create a sibling div to your React app's root div. Set a unique id attribute on that div, and pass that id as the targetElementId prop of the ModalProvider created in step one. ModalProvider uses a React Portal, and this targetElementId tells the provider where to render your modals. Using a sibling div to the react app makes z-index handling much easier.
In your application, wherever you need to launch a modal, import ModalContext from this component, and access it using the React.useContext hook. This will give you access to the openModal method; now you simply pass the component you want to render to openModal via its 'component' property. See example to the right.
Also check out our Overlay docs for an example using Overlays.
The portion of the React application that will have access to the ModalProvider 'openModal' and 'closeModal' methods. Generally, the ModalProvider should be near the root of your React app.
String id attribute which is set on the target element in your html. This target element is used as the root of your modals.