## Installation
npm install react-multi-modalInstall React multi modal as a dependency using npm or yarn
$ npm install react-multi-modal
$ yarn add react-multi-modal
``javascript`
import { ModalProvider, ModalContext, ModalRoot } from 'react-multi-modal';
- React 16.8.0 (hooks)
React multi modal was created to help the developer manage multiple modals in one page.
The common case is to create a variable in the state to save the visibility and methods to show and hide a modal. The problem is when we have multiple modals in one page and we need to handle the visibility of all modals. The consequence is we end up duplicating a lot of code.
An example:
`javascript
import React from 'react';
// Components
import ModalOne from './ModalOne';
import ModalTwo from './ModalTwo';
function App() {
const [modalOneIsOpen, setModalOneIsOpen] = React.useState(false);
const [modalTwoIsOpen, setModalTwoIsOpen] = React.useState(false);
function showModalOne() {
setModalOneIsOpen(true);
}
function showModalTwo() {
setModalTwoIsOpen(true);
}
function hideModalOne() {
setModalOneIsOpen(false);
}
function hideModalTwo() {
setModalTwoIsOpen(false);
}
return (
React multi modal is based on the react context API and it gives a
component, a context object and a root component where all the modals will be rendered.$3
The
ModalRoot component will render any component you pass in the showModal method and it acts like a placeholder. As such, you can render this component wherever you want in the tree, as long it's under the provider.$3
This component abstracts the definition of the context provider and uses the provider pattern. The logic behind showing/hiding a modal is in this component.
You should put this component as high as you need in the tree (don't worry, I'll show you full examples at the end). Example:
`javascript
import { ModalProvider, ModalRoot } from 'react-multi-modal';function App() {
return (
I am the title of the page
);
}
`$3
The
object provides some state and methods to manage a modal, as such:#### showModal({ component, modalProps })
This method is responsible to change the visibility of a given modal component. It receives two arguments:
#### component
It's the modal component you want to show. Example:
`javascript
import ExampleModal from './ExampleModal';showModal({ component: ExampleModal });
`#### modalProps
The
parameter should be an object. Besides the props that the library already provides to handle the visibility of the modal (isOpen, hideModal), the modalProps object will be destructured as props into your modal component. This approach makes it possible to pass whatever props you need to your custom modal component. Example:Any component that you'll pass to the showModal method will have automatically
isOpen, hideModal as props.- isOpen: boolean value that holds the visibility state of the modal
- hideModal: method to hide the current visibile modal
`javascript
function ExampleModal({ isOpen, hideModal, user, modalTitle }) {
return (
isOpen && (
{modalTitle}
{user.name}
)
);
}// in some component
showModal({
component: ExampleModal,
modalProps: {
user: {
name: 'John Doe',
},
modalTitle: 'Edit user settings',
},
});
`Notes
Since you can't use the
hook in the same component where you use the ModalProvider component, we provide you with the modalContext so you can define your own consumer.If you can't separate the
ModalProvider from the consumers, you can still do:`javascript
import { ModalProvider, ModalContext, ModalRoot } from 'react-multi-modal';// Components
import ModalOne from './ModalOne';
import ModalTwo from './ModalTwo';
function App() {
return (
{({ showModal, hideModal }) => (
<>
Welcome to this test!
)}
);
}
`Full examples
$3
javascript
import { ModalContext, ModalProvider, ModalRoot } from 'react-multi-modal';function ExampleOne({ isOpen, hideModal }) {
return (
isOpen && (
Hello there, I am a modal
I am the body
)
);
}function ExampleTwo({ isOpen, user }) {
return isOpen &&
{user.name};
}function App() {
function showExampleOneModal(showModal) {
showModal({
component: ExampleOne,
});
}
function showExampleTwoModal(showModal) {
showModal({
component: ExampleTwo,
modalProps: {
user: {
name: 'John Doe',
},
},
});
}
return (
{({ showModal, hideModal }) => (
<>
Welcome to this test!
)}
);
}
`$3
javascript
import React from 'react';
import { ModalContext, ModalProvider, ModalRoot } from 'react-multi-modal';function ExampleOne({ isOpen, hideModal }) {
return (
isOpen && (
Hello there, I am a modal
I am the body
)
);
}function ExampleTwo({ isOpen, user }) {
return isOpen &&
{user.name};
}function Sidebar() {
return
I am a sidebar;
}function MainContent() {
const { showModal, hideModal } = React.useContext(ModalContext);
function showExampleOneModal() {
showModal({
component: ExampleOne,
});
}
function showExampleTwoModal() {
showModal({
component: ExampleTwo,
modalProps: {
user: {
name: 'John Doe',
},
},
});
}
return (
Welcome to the main content!
);
}function App() {
return (
I am an example page!
);
}
``