React basic modal dialog

A simple modal dialog react component built with the HTML dialog element.

Disclaimer and acknowledgement

This package was created as a training project. The code is inspired from this article.

Features

• Generic
• Lightweight
• Accessible
• Closes with outside click or ESC key (consider adding a close button for accessibility)
• Easy to style
• Includes a ::backdrop pseudo-element for behind the element

Installation

Install the package from npm

$ npm install react-basic-modal-dialog

Examples

Basic example

import { useState } from "react";
import ModalDialog from "react-basic-modal-dialog";

export default function Example() {
  // The only two required props for the modal dialog are isDialogVisible
  // (to indicate whether the dialog should be visible or not) and closeDialog
  // (a function setting isDialogVisible to false). Let's create them below.

  const [isDialogVisible, setIsDialogVisible] = useState(false);
  const openDialog = () => setIsDialogVisible(true);
  const closeDialog = () => setIsDialogVisible(false);

  // And here is a simple silly example of the modal dialog being used

  return (
    <>
      <button onClick={openDialog}>Open modal dialog</button>

      <ModalDialog isDialogVisible={isDialogVisible} closeDialog={closeDialog}>
        <p>You can put whatever content you want here.</p>
        <p>A button to close the dialog sounds like a good idea.</p>
        <button onClick={closeDialog}>Close</button>
      </ModalDialog>
    </>
  );
}

Styling with classes (using tailwind css in this example)

import { useState } from "react";
import ModalDialog from "react-basic-modal-dialog";

export default function Example() {
  const [isDialogVisible, setIsDialogVisible] = useState(false);
  const openDialog = () => setIsDialogVisible(true);
  const closeDialog = () => setIsDialogVisible(false);

  return (
    <>
      <button onClick={openDialog}>Open modal dialog</button>
      <ModalDialog
        isDialogVisible={isDialogVisible}
        closeDialog={closeDialog}
        dialogClassName="max-w-md rounded-xl p-0 backdrop:bg-black/60"
        contentClassName="flex flex-col p-6 gap-2 justify-between items-center"
      >
        <h2 className="text-lg font-semibold">A dialog with class</h2>
        <p className="text-sm text-gray-600	text-center">
          I'm a dialog that's been styled using tailwind css classes
        </p>
        <button
          className="w-full bg-gray-600 text-white font-semibold p-2.5 mt-4 rounded-lg"
          onClick={closeDialog}
        >
          Close
        </button>
      </ModalDialog>
    </>
  );
}

Properties

<ModalDialog

  isDialogVisible={
  /* Boolean describing if the dialog should be shown or not */}

  closeDialog={
  /* Function that closes the dialog (sets isDialogVisible to false) */}

  dialogClassName={
  /* String with space-separated class names that will be applied to the dialog element */}

  contentClassName={
  /* String with space-separated class names that will be applied to the content div
  inside the dialog element */}

>

</ModalDialog>