❤
npm
Sign UpSign In

pop-modal

1.1.5-a • Public • Published

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 )

Readme

Keywords

none

Package Sidebar

Install

npm i pop-modal

Repository

github.com/voodoo-child/pop-modal

Homepage

github.com/voodoo-child/pop-modal#readme

Weekly Downloads

31

Version

1.1.5-a

License

ISC

Unpacked Size

143 kB

Total Files

15

Last publish

Collaborators

  • voodoo-child
Try on RunKit
Report malware