Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
react-poppop
Advanced tools
A responsive, mobile support, multi directions and easy to use modal for ReactJS.
Weekly downloads
Readme
A responsive, mobile support, multi directions and easy to use modal for ReactJS.
Compatible with React 15 and 16.
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.
The miminum usage of PopPop
is set open as true
.
<PopPop open={true}>
<h1>Title</h1>
<p>Content</p>
</PopPop>
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>
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>
)
}
}
* 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 |
MIT @ctxhou
FAQs
A responsive, mobile support, multi directions and easy to use modal for ReactJS.
The npm package react-poppop receives a total of 1,083 weekly downloads. As such, react-poppop popularity was classified as popular.
We found that react-poppop demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.