react-poppop
v1.5.0
Published
A responsive, mobile support, multi directions and easy to use modal for ReactJS.
Downloads
4,205
Maintainers
Readme
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
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:
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<script src="https://unpkg.com/react-poppop/dist/react-poppop.min.js"></script>
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
.
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 (
<div>
<button className="btn btn-default" onClick={() => this.toggleShow(true)}>Show Modal</button>
<PopPop position="centerCenter"
open={show}
closeBtn={true}
closeOnEsc={true}
onClose={() => this.toggleShow(false)}
closeOnOverlay={true}>
<h1>title</h1>
<p>
content
</p>
</PopPop>
</div>
)
}
}
Props
* means required
License
MIT @ctxhou