https://github.com/ctxhou/react-poppop
A mobile support and multi-directional modal for ReactJS
https://github.com/ctxhou/react-poppop
dialog mobile modal popup react react-modal react-poppop responsive
Last synced: 10 months ago
JSON representation
A mobile support and multi-directional modal for ReactJS
- Host: GitHub
- URL: https://github.com/ctxhou/react-poppop
- Owner: ctxhou
- Created: 2015-11-10T08:22:35.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2018-09-16T12:45:35.000Z (over 7 years ago)
- Last Synced: 2025-06-29T06:04:13.690Z (11 months ago)
- Topics: dialog, mobile, modal, popup, react, react-modal, react-poppop, responsive
- Language: JavaScript
- Homepage: https://ctxhou.github.io/react-poppop/
- Size: 261 KB
- Stars: 80
- Watchers: 4
- Forks: 8
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Poppop
> A responsive, mobile support, multi directions and easy to use modal for ReactJS.
Compatible with React 15 and 16.
[](https://www.npmjs.com/package/react-poppop/)
[](https://travis-ci.org/ctxhou/react-poppop)
[](https://ci.appveyor.com/project/ctxhou/react-poppop)
[](https://codecov.io/gh/ctxhou/react-poppop)
[](https://codeclimate.com/github/ctxhou/react-poppop)
### [Demo](https://ctxhou.github.io/react-poppop/)
## 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](#installation)
- [Usage](#usage)
* [Minimum Config](#minimum-config)
* [Multi directions - 9 positions](#multi-directions---9-positions)
* [Controllable](#controllable)
- [Props](#props)
- [License](#license)
## Installation
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](https://github.com/ctxhou/react-poppop/blob/master/docs/standalone.html) example.
## Usage
### Minimum Config
The miminum usage of `PopPop` is set open as `true`.
```js
Title
Content
```
### 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**
```js
Title
Content
```
### Controllable
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 (
this.toggleShow(true)}>Show Modal
this.toggleShow(false)}
closeOnOverlay={true}>
title
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](https://github.com/ctxhou)