React-clear-modal NPM

react-clear-modal

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

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