Easy to control the Modal everywhere.
Note: Version 2.x is require React 16.8.x
- Installation
-
Usage
- Step1: Create Modal
- Step2: Modal Provider
- Step3: Modal Component
- Props
- Config options
- Demo
To install, you can use npm or yarn:
$ npm install react-modal-es
$ yarn add react-modal-es
Create file modal.js
and import createModal
to create modal functions:
-
openModal(modalName)
to show the Modal -
closeModal(modalName)
to hide the Modal -
closeAllModal()
to hide all Modals -
ModalProvider
makes the Modal state available to any nested components Example Usage
import { createModal } from 'react-modal-es';
const modal = createModal();
export const openModal = modal.openModal;
export const closeModal = modal.closeModal;
export const closeAllModal = modal.closeAllModal;
export const ModalProvider = modal.ModalProvider;
import ModalProvider
from modal.js
and connect modal at root app.
...
import { ModalProvider } from './modal';
const App = () => {
return (
<ModalProvider>
...
</ModalProvider>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
The Modal has one required prop Demo:
-
name
to switch show and hide.
import Modal from 'react-modal-es';
import { openModal, closeModal, closeAllModal } from './modal';
const Page = () => {
return (
<div>
<Modal name='myModal' title='Title Modal'>
Content
</Modal>
<button onClick={() => openModal('myModal')}>Open Modal</button>
</div>
);
};
Support open multilple modal demo
Use prop zIndex
to make a layer of Modal
import Modal from 'react-modal-es';
import { openModal, closeModal, closeAllModal } from './modal';
const Page = () => {
const onOpenModal = () => {
openModal('modal1');
openModal('modal2');
};
return (
<div>
<Modal name='modal1' title='Title Modal 1' zIndex={1}>
Content 1
</Modal>
<Modal name='modal2' title='Title Modal 2' zIndex={2}>
Content 2
</Modal>
<button onClick={onOpenModal}>Open Modal</button>
</div>
);
};
<Modal
name='myModal'
title='Modal Title'
zIndex={1}
className='your-classname'
maxWidth='600px'
overlayColor='rgba(0, 0, 0, 0.7)'
center={false}
closeOverlayDisabled={false}
didOpen={() => null}
willUnmount={() => null}
willClose={() => null}
>
...
</Modal>
Building your own custom UI and Style demo
3 parameters of customUI
-
title
type string -
children
type node -
onClose
type function
import React from 'react'
import { createModal } from 'react-modal-es'
const customStyles = {
body: {
fontFamily: 'arial',
background: '#222',
color: '#eee',
padding: '40px',
textAlign: 'center'
},
...
}
const customUIComponent = (props, onClose) => (
<div style={customStyles.body}>
<div style={customStyles.title}>{props.title}</div>
<div style={customStyles.content}>{props.children}</div>
<button style={customStyles.button} onClick={onClose}>
close
</button>
</div>
)
const configs = {
customUI: customUIComponent
}
const modal = createModal(configs)
...