react-modal-es
Easy to control the Modal everywhere.
Note: Version 2.x is require React 16.8.x
Table of Contents
- Installation
- Usage
- Step1: Create Modal
- Step2: Modal Provider
- Step3: Modal Component
- Props
- Config options
- Demo
Installation
To install, you can use npm or yarn:
$ npm install react-modal-es
$ yarn add react-modal-es
Usage
Step1:
Create modal
Create file modal.js
and import createModal
to create modal functions:
openModal(modalName)
to show the ModalcloseModal(modalName)
to hide the ModalcloseAllModal()
to hide all ModalsModalProvider
makes the Modal state available to any nested components Example Usage
import createModal from 'react-modal-es'; const modal = ;const openModal = modalopenModal;const closeModal = modalcloseModal;const closeAllModal = modalcloseAllModal;const ModalProvider = modalModalProvider;
Step2:
Modal Provider
import ModalProvider
from modal.js
and connect modal at root app.
...import ModalProvider from './modal'; const App = return <ModalProvider> ... </ModalProvider> ;; ReactDOM;
Step3:
Modal Component
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 ='myModal' ='Title Modal'> Content </Modal> <button =>Open Modal</button> </div> ;;
Open multiple Modals
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 = ; ; ; return <div> <Modal ='modal1' ='Title Modal 1' => Content 1 </Modal> <Modal ='modal2' ='Title Modal 2' => Content 2 </Modal> <button =>Open Modal</button> </div> ;;
Props
<Modal ='myModal' ='Modal Title' = ='your-classname' ='600px' ='rgba(0, 0, 0, 0.7)' = = = = => ...</Modal>
Config options
Custom UI
Building your own custom UI and Style demo
3 parameters of customUI
title
type stringchildren
type nodeonClose
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 => <div =>propstitle</div> <div =>propschildren</div> <button = => close </button> </div> const configs = customUI: customUIComponent const modal = ...