React Poppop
A responsive, mobile support, multi directions and easy to use modal for ReactJS.
Compatible with React 15 and 16.
Demo
Features
- Mobile support — Responsive and support tap action.
- Multi directions — support 9 positions. ↑ ↗ ︎→ ↘ ︎↓ ↙ ︎← ↖ ︎⥁
- Easily customize style
- React v16 portal — Using react v16 official portal API. Also backward compatible with v15
Table of Contents
Installation
Install it with npm.
npm install react-poppop --save
Then, import the module by module bundler like webpack
, browserify
// es6; // not using es6var PopPop = ;
UMD build is also available. If you do this, you'll need to include the dependencies:
For example:
You can reference standalone.html example.
Usage
Minimum Config
The miminum usage of PopPop
is set open as true
.
<PopPop open=true> <h1>Title</h1> <p>Content</p></PopPop>
Multi directions - 9 positions
The default position of react-poppop
is Top Center
.
There are 9 positions provided by react-poppop
.
'topLeft', 'topCenter', 'topRight', 'centerLeft', 'centerCenter', 'centerRight', 'bottomLeft', 'bottomCenter', 'bottomRight'
Select a position you want and pass it to position
props.
Example
<PopPop open=true position="topRight"> <h1>Title</h1> <p>Content</p></PopPop>
Controllable
You can set onClose
callback, close by click close button
, esc button
and overlay
.
;; { superprops; thisstate = show: false } { this; } { const show = thisstate; return <div> <button className="btn btn-default" onClick= this>Show Modal</button> <PopPop position="centerCenter" open=show closeBtn=true closeOnEsc=true onClose= this closeOnOverlay=true> <h1>title</h1> <p> content </p> </PopPop> </div> }
Props
* means required
Props | Type | Default | Description |
---|---|---|---|
open * | bool |
Open the modal or not | |
closeBtn | bool |
false | Whether to show close button |
closeOnOverlay | bool |
true | Whether to close modal on click overlay area |
closeOnEsc | bool |
false | Whether to close modal when click `esc` |
onClose | function |
close modal callback | |
position |
topLeft topCenter topRight centerLeft centerCenter centerRight bottomLeft bottomCenter bottomRight
|
topCenter | Modal position |
overlayStyle |
object
|
reference: link | customize overlay style |
contentStyle | object |
reference: link | customize content style |
License
MIT @ctxhou