A flexible Modal component kit for React

Usage no npm install needed!

<script type="module">
  import reactModalConstructionKit from '';



React Modal Construction Kit

A highly extensible Modal library.



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


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

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

  onBtnOpenModalClick = () => {
      isModalVisible: true

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

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

    return (
            A super minimal Modal
          isVisible={isModalVisible} />
          Open 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


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


MIT Licensed. Copyright (c) Mike Vercoelen 2018.