ctxhou / react-poppop

A mobile support and multi-directional modal for ReactJS

React Poppop

A responsive, mobile support, multi directions and easy to use modal for ReactJS.

Compatible with React 15 and 16.

Demo

Features

• Mobile support — Responsive and support tap action.
• Multi directions — support 9 positions. ↑ ↗ ︎→ ↘ ︎↓ ↙ ︎← ↖ ︎⥁
• Easily customize style
• React v16 portal — Using react v16 official portal API. Also backward compatible with v15

Table of Contents

• Installation
• Usage
  • Minimum Config
  • Multi directions - 9 positions
  • Controllable
• Props
• License

Installation

Install it with npm.

npm install react-poppop --save

Then, import the module by module bundler like webpack, browserify

// es6
import PopPop from 'react-poppop';

// not using es6
var PopPop = require('react-poppop');

UMD build is also available. If you do this, you'll need to include the dependencies:

For example:

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<script src="https://unpkg.com/react-poppop/dist/react-poppop.min.js"></script>

You can reference standalone.html example.

Usage

Minimum Config

The miminum usage of PopPop is set open as true.

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

Multi directions - 9 positions

The default position of react-poppop is Top Center.

There are 9 positions provided by react-poppop.

'topLeft', 'topCenter', 'topRight', 'centerLeft', 'centerCenter', 'centerRight', 'bottomLeft', 'bottomCenter', 'bottomRight'

Select a position you want and pass it to position props.

Example

<PopPop open={true}
        position="topRight">
  <h1>Title</h1>
  <p>Content</p>
</PopPop>

Controllable

You can set onClose callback, close by click close button, esc button and overlay.

import React, {Component} from 'react';
import PopPop from 'react-poppop';

export default class Example extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false
    }
  }

  toggleShow = show => {
    this.setState({show});
  }

  render() {
    const {show} = this.state;
    return (
      <div>
        <button className="btn btn-default" onClick={() => this.toggleShow(true)}>Show Modal</button>
        <PopPop position="centerCenter"
                open={show}
                closeBtn={true}
                closeOnEsc={true}
                onClose={() => this.toggleShow(false)}
                closeOnOverlay={true}>
          <h1>title</h1>
          <p>
            content
          </p>
        </PopPop>
      </div>
    )
  }
}

Props

* means required

Props	Type	Default	Description
open *	bool		Open the modal or not
closeBtn	bool	false	Whether to show close button
closeOnOverlay	bool	true	Whether to close modal on click overlay area
closeOnEsc	bool	false	Whether to close modal when click `esc`
onClose	function		close modal callback
position	topLeft topCenter topRight centerLeft centerCenter centerRight bottomLeft bottomCenter bottomRight	topCenter	Modal position
overlayStyle	object	reference: link	customize overlay style
contentStyle	object	reference: link	customize content style

License

MIT @ctxhou

react-poppop's Issues

figure out Appveyor cannot pass jest snapshot error

ref #52

when user close, overlay should remove

add with margin style

change react-tappable

Because react-tappable currently doesn't support react v16, need to use other method to support touch event.

content overflow problem

when content is too big
the popup window can't show scroll bar.

Change style of close button

Hi,

I want to change the style of the close button, is there an easy way to do this?

Thanks

position prop default

centerCenter should be the default in my opinion

0.14 warning problem

after remove div, warning

test ssr

remove component when click close

add onclose callback

How to style wrapper ?

Hi,

I want to use this library as a right sidebar.

I have a problem because the wrapper has a 20px padding.

How can I remove this padding ? Can I add className to the popupcomponent ?

Thank you

add `esc` close

How to style?

Hey,
Thanks for the repo.

How can I apply styles so I can change how the popup looks like?

Tried this:

        <PopPop position="centerCenter"
                open={true}
                closeBtn={false}
                closeOnEsc={false}
                closeOnOverlay={false}
                
                style={{  
                    backdropFilter: "blur(10px)",
                    backgroundColor: "transparent",
                    boxShadow: "none",
                    display: "flex", 
                    flexDirection: "column",
                    alignItems: "center"
                        }}

                >

               <h1> Test 123 </h1>
        </PopPop>

But it does not have any effect.

Cannot read property 'injection' of undefined

injectTapEventPlugin
https://ovkn502kp5.codesandbox.io/node_modules/react-tap-event-plugin/src/injectTapEventPlugin.js:23:89
evaluate
https://ovkn502kp5.codesandbox.io/node_modules/react-poppop/lib/poppop.js:43:35