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 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 and demo can be found here: http://minutemailer.github.io/react-popup/