Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-poppop
Advanced tools
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,095 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.