Simple and powerful react popup component.
Part of Minutemailer.com - Marketing Simplified
Â
Breaking changes in 0.9.x
The popup and overlay is now two separate layers to allow more customization. See demo css for styling example.
Global API approach
The idea behind react-popup
is to use it as a drop-in replacement for the native window.alert
. With the similarity of only displaying one popup at a time. This is why we use a global API to control the component instead of rendering it inside components. Maybe this is an anti-pattern, maybe it's not. Feel free to discuss it by opening an issue if one doesn't already exist.
Install
Install it with npm (or yarn) (npm install react-popup --save
). The component is API driven and means that you only render it once, on a global level. Here's a simple example:
import React from 'react'; import ReactDom from 'react-dom'; import Popup from 'react-popup'; ReactDom.render( <Popup />, document.getElementById('popupContainer') ); Popup.alert('Hello');
Documentation
Documentation and demo can be found here: http://minutemailer.github.io/react-popup/
Â