React-modal-construction-kit NPM

React Modal Construction Kit

A highly extensible Modal library.

Demo

mikevercoelen.github.io/react-modal-construction-kit

Installation

npm install react-modal-construction-kit --save

Example

import React, { Component } from 'react'
import { Modal, Overlay } from 'react-modal-construction-kit'

export default class App extends Component {
  state = {
    isModalVisible: false
  }

  onBtnOpenModalClick = () => {
    this.setState({
      isModalVisible: true
    })
  }

  close = () => {
    this.setState({ isModalVisible: false })
  }

  render () {
    const { isModalVisible } = this.state

    return (
      <div>
        <Modal
          onClickOutside={this.close}
          onClosed={this.close}
          isOpen={isModalVisible}>
          <p>
            A super minimal Modal
          </p>
        </Modal>
        <Overlay
          isVisible={isModalVisible} />
        <button
          onClick={this.onBtnOpenModalClick}>
          Open modal
        </button>
      </div>
    )
  }
}

Modal

The modal component is a fully customizable modal, requires no styling and is already animated out of the box.

Property	Type	Default	Description
`isOpen`	boolean	false	Open or close modal's state
`autoFocus`	boolean	-	autofocus the component on mount
`zIndex`	number	750	z-index value
`role`	string	`"dialog"`	HTML5 `role`
`children`	React Node	-	The content of the modal
`onOpened`	function	-	Called on when the Transitions triggers 'onOpened'
`onClosed`	function	-	Called on when the Transitions triggers 'onClosed'
`onEnter`	function	-	Called on `componentDidMount`
`onExit`	function	-	Called on `componentWillUnmount`
`onEntered`	function(node, isAppearing)	-	-
`onExited`	function(node)	-	-
`className`	string	-	Adds a class names to component root
`dialogClassName`	string	-	Adds a class name to dialog
`contentClassName`	string	-	Adds a class name to content
`hasEscapeClose`	boolean	true	If enabled, `escape` keydown will trigger `onClosed`
`hasOutsideClickClose`	boolean	true	If enabled, clicking outside of the modal (i.e. on the overlay) will trigger `onClosed`
`transitionDuration`	number	300	Duration of the animation

Overlay

The Modal component does not have an overlay by default, the reason for this is: what if you have multiple modals open? You should only have ONE overlay. It's animated and also requires no styling, it just works ;)

import { Overlay } from 'react-modal-construction-kit'

Property	Type	Default	Description
`isVisible`	boolean	false	Shows or hides the overlay
`zIndex`	number	500	z-index value
`className`	string	-	A className applied to the overlay
`opacity`	number	0.7	The opacity value when the overlay is fully visible
`transitionDuration`	number	150	The duration of the transition
`onClick`	function(event)	-	onClick handler, when using a modal you don't need this, use `Modal.onClickOutside`