react-poppop v1.5.0
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/react@16.0.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.6/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
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago