Modern React Modal

A lightweight and customisable Modal component for modern React apps

Installation

Using npm

npm install modern-react-modal

Using yarn

yarn add modern-react-modal

Usage

import { Modal, ModalBody, ModalHeader, ModalFooter } from "modern-react-modal";
import { useState } from "react";

const MyComponent = (props) => {
  const [show, setShow] = useState(false);

  const onClose = () => {
    setShow(false);
  };

  return (
    <div>
      <button onClick={() => setShow(true)}>Subscribe to Newsletter</button>
      <Modal show={show} onClose={onClose}>
        <ModalHeader>
          <h2>Subscribe To Newsletter</h2>
        </ModalHeader>
        <ModalBody>
          <p>Enter email in which you want to receive updates</p>
          <input placeholder="Enter email" />
        </ModalBody>
        <ModalFooter>
          <button onClick={onClose}>Close</button>
          <button>Subscribe</button>
        </ModalFooter>
      </Modal>
    </div>
  );
};

Props

Modal

Prop	Description	Value	Required
show	Determines whether to show the modal	boolean	Yes
onClose	Function called when modal is closed	Function	Yes
size	Determines size of modal	sm or md or lg or xl or fullscreen	No
clickOverlayToClose	If true,the modal closes when overlay is clicked	boolean	No
blurOverlay	If true, blur filter is applied to overlay	boolean	No
scrollContent	If true, then modal maintains a fixed height in case of content overflow. The modal body becomes scrollable. If false, then modal assumes entire height of content and the overlay is scrollable	boolean	No
animation	Determines the entry animation of the modal	fade or slide	No

ModalHeader

Prop	Description	Value	Required
className	Custom classname applied to the header component	string	No

ModalBody

Prop	Description	Value	Required
className	Custom classname applied to the body component	string	No

ModalFooter

Prop	Description	Value	Required
className	Custom classname applied to the footer component	string	No