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