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
boolean
(default: false)
replace Replace all inner markup with Component children
boolean
isOpen: Control modal state from parent component
boolean
(default: true)
scrollable: You can disable scroll in modal body
boolean
(default: false)
draggable: You can drag a modal window
Function
onClose: Handle modal closing. Should return true if you allow closing
string
className: ClassName for modal DOM element, can be used for set modal width or change behaviour on mobile devices
string
(example '200px')
width: Width in pixels, em's, vw etc
JSX.Element | string
header: Modal heading, doesn't disabled close button
JSX.Element | string
footer: Place here your actions
(JSX.Element | string)
closeButton: Content of your closing button
string
closeButtonPosition: Place closing button under your modal or inside header. Allowed options: 'header' | 'bottom'
boolean
(default: false)
portal: 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