react-modal-es

Easy to control the Modal everywhere.

Usage no npm install needed!

<script type="module">
  import reactModalEs from 'https://cdn.skypack.dev/react-modal-es';
</script>

README

react-modal-es

Easy to control the Modal everywhere.

Build Status npm version

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

Migrating from 1.x

1.x docs

Table of Contents

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 = (title, children, onClose) => (
  <div style={customStyles.body}>
    <div style={customStyles.title}>{title}</div>
    <div style={customStyles.content}>{children}</div>
    <button style={customStyles.button} onClick={onClose}>
      close
    </button>
  </div>
)

const configs = {
  customUI: customUIComponent
}

const modal = createModal(configs)
...