react-pure-modal

React pure modal is a simplest way to create dialog on your site.

• Very small (less than 4Kb)
• Mobile friendly
• Without dependencies

Demo

https://memcrab.github.io/react-pure-modal/

Installation

npm i -S react-pure-modal

Usage

import PureModal from 'react-pure-modal';
import 'react-pure-modal/dist/react-pure-modal.min.css';

const [modal, setModal] = useState(false);

<PureModal
  header="Your header"
  footer={
    <div>
      <button>Cancel</button>
      <button>Save</button>
    </div>
  }
  isOpen={modal}
  closeButton="close"
  closeButtonPosition="bottom"
  onClose={() => {
    setModal(false);
    return true;
  }}
>
  <p>Your content</p>
</PureModal>;

And open with

<button className="button" onClick={() => setModal(true)}>Open simple modal</button>

Options

replace boolean (default: false)

Replace all inner markup with Component children

isOpen: boolean

Control modal state from parent component

scrollable: boolean (default: true)

You can disable scroll in modal body

draggable: boolean (default: false)

You can drag a modal window

onClose: Function

Handle modal closing. Should change isOpen to false

className: string

ClassName for modal DOM element, can be used for set modal width or change behaviour on mobile devices

width: string (example '200px')

Width in pixels, em's, vw etc

header: JSX.Element | string

Modal heading, doesn't disabled close button

footer: JSX.Element | string

Place here your actions

closeButton: (JSX.Element | string)

Content of your closing button

closeButtonPosition: string

Place closing button under your modal or inside header. Allowed options: 'header' | 'bottom'

portal: boolean (default: false)

Creates React.Portal

Changelog (latest on top)

• Removed double calling onClose on popup closing and unmount. onClose will be called only on: close button, backdrop, esc click
• Drag and drop
• fix bug in firefox and safari with modal position
• set width as atribute
• new default aligning to the screen center!
• prevent of modal closing if ESC pressed in editable element
• now with minified css!
• styles are more impressive now, good mobile support
• now scrollable can be false
• remove dependencies, rewrite open and close logic, fix linting
• new header logic and breaking classes changes

Developing

• npm install
• npm run webpack:dev -- --watch
• npm run webpack:prod -- --watch
• npm run test:dev
• Open index.html from examples