React Modal Construction Kit

A highly extensible Modal library.

• Modal
• Overlay
• Portal

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

License

MIT Licensed. Copyright (c) Mike Vercoelen 2018.