Modern-react-modal NPM

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