react-popup

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/