https://github.com/minutemailer/react-popup

React popup component
https://github.com/minutemailer/react-popup

alert component es6 javascript modal popover popup popup-box promt react

Last synced: about 2 months ago
JSON representation

React popup component

• Host: GitHub
• URL: https://github.com/minutemailer/react-popup
• Owner: minutemailer
• License: mit
• Created: 2014-11-08T22:18:30.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2023-09-21T11:35:58.000Z (12 months ago)
• Last Synced: 2024-04-15T08:08:58.593Z (5 months ago)
• Topics: alert, component, es6, javascript, modal, popover, popup, popup-box, promt, react
• Language: JavaScript
• Homepage: http://minutemailer.github.io/react-popup/
• Size: 6.24 MB
• Stars: 208
• Watchers: 6
• Forks: 74
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  





    

        

    

    

        

    

    

        

    





    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](https://github.com/minutemailer/react-popup/blob/gh-pages/popup.example.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:

```jsx

import React from 'react';

import ReactDom from 'react-dom';

import Popup from 'react-popup';

ReactDom.render(

    ,

    document.getElementById('popupContainer')

);

Popup.alert('Hello');

```

## Documentation

Documentation and demo can be found here: http://minutemailer.github.io/react-popup/