Elegant Cross-platform Modal Library For React – React Poppop

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:

Download Details:

Author: ctxhou

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/ctxhou/react-poppop

License: MIT