react-modal-es

react-modal-es

Easy to control the Modal everywhere.

Note: Version 2.x is require React 16.8.x

Migrating from 1.x

1.x docs

Table of Contents

• Installation
• Usage
  • Step1: Create Modal
  • Step2: Modal Provider
  • Step3: Modal Component
• Props
• Config options
  • Custom UI
• Demo
  • Basic Modal
  • Multiple Modal
  • Custom UI Modal

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 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;

Step2:

Modal Provider

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'));

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 name='myModal' title='Title Modal'>
        Content
      </Modal>
      <button onClick={() => openModal('myModal')}>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 = () => {
    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>
  );
};

Props

<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>

Config options

Custom UI

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)
...