pop-modal

A simple adaptive React Popup Modal. Also works fine with server side rendering of React.

demo

Demo on heroku

instalation

using npm

  npm install pop-modal ---save

Pop-Modal is a wrapper for React Components. It passes as props 2 methods for opening and closing modal: 'openPopup' and 'closePopup' and the 'Modal' itself.

const { openPopup, closePopup, Modal } = this.props

to render something inside the modal just wrapp it inside Modal prop of Component.

  render () {
    const { Modal } = this.props
    return (
        <Modal>
            <h1>Hello from Pop Modal</h1>
        </Modal>
    )
}

usage

To add Modal to a React Component you must pass the Component that will receive modal's props.

import WithModal from 'pop-modal'

export default WithModal( YourComponent )

configuring modal

To configure Modal's behaviour you can pass props to it.

Below is a table of props it accepts.

PropName	Type	Description	Default	Required
onClose	function	An callback function that will be called once the modal has been closed.	Null	false
onOpen	function	An callback function that will be called once the modal has been opened.	Null	false
openMs	number	Timeout in ms for modal opening.	1000	false
closeMs	number	Timeout in ms for modal closing.	500	false
showBtn	boolean	Display close button or no.	true	false
btnClassName	string	Close button's className.	'fa fa-close'	false
outsideClickClose	boolean	Option to close modal if there is an click outside of it's container.	false	false
defaultOpen	boolean	Used to render modal in open stage, skipping opening stage. It can be used for Server Side Rendering when you need the modal to be open from the start.	false	false

Example:

  const { Modal } = this.props
  ...
  return (
    <Modal onClose={ () => { console.log('closed') } } openMs={ 1000 } closeMs={ 1000 }>
      <h1>Hello</h1>
    </Modal>
  )

opening and closing

The react component that is wrapped in pop-modal gets two props for closing and opening: openPopup and closePopup, openPopup can take an initial stage to be opened in. Example:

    this.props.openPopup() // Opens the popup

css

You can find the css required by the modal in the 'pop-modal/dist/modal.css' file in your node_modules. It's very likely that you will need to do some adjustments to this css file so it's better to just copy it from here and edit it the way you need it.

The modal itself has four transition classes: closed > opening > open > closing. So you can customize the transition of the modal.

import 'pop-modal/dist/modal.css'

usage example ( from demo )

using decorators

import React, { Component } from 'react'
import WithModal from 'pop-modal'

@WithModal

export default class Page extends Component {
    render () {
        const { openPopup, Modal } = this.props
        return (
            <div className='container text-center'>
                <h1>Pop Modal Demo</h1>
                <button className='btn btn-primary' type='button' onClick={
                    () => { openPopup() }
                }>Open modal</button>
                <Modal outsideClickClose>
                    <h1>Hello from Pop Modal</h1>
                </Modal>
            </div>
        )
    }
}

using ES6

import React, { Component } from 'react'
import WithModal from 'pop-modal'

class Page extends Component {
    render () {
        const { openPopup, Modal } = this.props
        return (
            <div className='container text-center'>
                <h1>Pop Modal Demo</h1>
                <button className='btn btn-primary' type='button' onClick={
                    () => { openPopup() }
                }>Open modal</button>
                <Modal outsideClickClose>
                    <h1>Hello from Pop Modal</h1>
                </Modal>
            </div>
        )
    }
}

export default WithModal( Page )