Elegant Cross-platform Modal Library For React – React Poppop

Description:

React Poppop is a responsive, mobile support, multi directions and easy to use modal for ReactJS.

Installation:

# NPM
$ npm install react-poppop --save

Usage:

Import the React Poppop into your module.

import PopPop from 'react-poppop';

Create a basic modal popup.

<PopPop open={true}>
  <h1>Modal Title</h1>
  <p>Modal Content</p>
</PopPop>

Customize the modal popup with the following props.

{
  /*  topLeft
      topCenter
      topRight
      centerLeft
      centerCenter
      centerRight
      bottomLeft
      bottomCenter
      bottomRight
  */
  position: 'topCenter',
  // shows close button
  closeBtn: false
  // close modal on click overlay
  closeOnOverlay: true,
  // close modal when click 'ESC'
  closeOnEsc: false
  // customize overlay styles
  overlayStyle: {},
  // customize content styles
  contentStyle: {},
};

Preview: