react-clear-modal

Simple and lightweight, fully controlled isomorphic (with SSR support) modal component for React.js

Table of contents

• Installation
• Usage
• Props
• Demo

Installation

npm

npm install react-clear-modal --save

yarn

yarn add react-clear-modal

Usage

Basic Example:

import { useState } from 'react';
import ReactClearModal from 'react-clear-modal';

function ReactClearModalExample() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = useCallback(() => {
    setIsModalOpen(true);
  }, []);

  const closeModal =  useCallback(() => {
    setIsModalOpen(false);
  }, []);

  return (
    <div>
      <button type="button" title="Open" onClick={openModal}>Open</button>

      <ReactClearModal
        {/* here you can also pass any other element attributes. */}
        isOpen={isModalOpen}
        onRequestClose={closeModal}
      >
        <div>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae quia, neque modi libero quidem ipsum architecto, incidunt molestias culpa, totam accusantium reprehenderit animi voluptas magni alias error commodi ut.
        </div>

        <button type="button" title="Close" onClick={closeModal}>Close</button>
      </ReactClearModal>
    </div>
  );
}

export default ReactClearModalExample;

Props

Name	Type	Default Value	Description
isOpen	boolean	false	Is the modal open
onRequestClose	function		The function that will be called to close the modal window when the ESC button is pressed (if disableCloseOnEsc !== true) or an area outside of the content is clicked (if disableCloseOnBgClick !== true)
closeTimeout	number		Time period in milliseconds after which the modal close function (onRequestClose prop) will be called
preRender	boolean	false	Whether the modal window and its content must be present in the DOM when the isOpen property is set to false
contentProps	object	{}	DOM props (HTMLAttributes) for modal content wrapper div
parentElement	string|HTMLElement	document.body	Modal Portal container element (HTMLElement) or css selector (string). Ignored if disableRenderInPortal is set to true
disableCloseOnEsc	boolean	false	Prevent modal window from closing when ESC key is pressed
disableCloseOnBgClick	boolean	false	Prevent modal from closing after clicking on modal background
disableBodyScrollOnOpen	boolean	false	Set {overflow: hidden} for document.body when modal is open
disableRenderInPortal	boolean	false	Prevent render modal in portal (if true it will be rendered directly inside parent component)
...	object	{}	DOM props (HTMLAttributes) for modal container div

Demo