npm promotes metadefinitions
Miss any of our Open RFC calls?Watch the recordings here! »

react-pure-modal

2.0.14 • Public • Published

react-pure-modal npm package Build Status

NPM

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 return true if you allow closing

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)

  • 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

Install

npm i react-pure-modal

DownloadsWeekly Downloads

182

Version

2.0.14

License

ISC

Unpacked Size

3.97 MB

Total Files

31

Last publish

Collaborators

  • avatar