A responsive, mobile support, multi directions and easy to use modal for ReactJS.
npm install react-poppop> A responsive, mobile support, multi directions and easy to use modal for ReactJS.
Compatible with React 15 and 16.



!david


!download
!img
* 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
- Installation
- Usage
* Minimum Config
* Multi directions - 9 positions
* Controllable
- Props
- License
Install it with npm.
``js`
npm install react-poppop --save
Then, import the module by module bundler like webpack, browserify
`js
// es6
import PopPop from 'react-poppop';
// not using es6
var PopPop = require('react-poppop');
`
UMD build is also available. If you do this, you'll need to include the dependencies:
For example:
`html`
You can reference standalone.html example.
The miminum usage of PopPop is set open as true.
` Contentjs`
Title
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
` Contentjs`
Title
You can set onClose callback, close by click close button, esc button and overlay.
`js
import React, {Component} from 'react';
import PopPop from 'react-poppop';
export default class Example extends Component {
constructor(props) {
super(props);
this.state = {
show: false
}
}
toggleShow = show => {
this.setState({show});
}
render() {
const {show} = this.state;
return (
content
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