Easy-dialog-modal NPM

easy-dialog-modal User Guide

easy-dialog-modal is a tiny React library designed to make implmenting HTML5 dialog modal components easy.

easy-dialog-modal implements a simple hook-based API so that the open or closed state of a modal can be controlled easily from anywhere in your React application.

Installation

Install the library using npm:

npm install easy-dialog-modal

Usage

Import the Modal component (and its default styling if you choose) and use it within your application by providing a string ID:

import React from "react";
import Modal from "easy-dialog-modal";
import "easy-dialog-modal/dist/styles.css"; // Import the library's styles

const App = () => {
  return (
    <div>
      {/* You can put anything in the modal */}
      <Modal id="my_modal">
        <h1>Modal Title</h1>
        <p>This is modal content.</p>
        <button>Close</button>
      </Modal>
    </div>
  );
};

export default App;

Controlling modal state

There are two ways to control whether or not a modal component is open:

`useModal` hook

The useModal hook provides an easy way to control modals in your application. It returns functions that allow you to open and close specific modals by their unique IDs as well as a boolean that informs your application whether a particular modal is open or not.

import React from "react";
import Modal from "easy-dialog-modal";
import useModal from "easy-dialog-modal/dist/hooks/useModal"; // Import the useModal hook
import "your-modal-library/dist/styles.css"; // Import the library's styles

const App = () => {
  const { openMyModal, closeMyModal, isMyModalOpen } = useModal("my_modal");

  return (
    <div>
      {/* You can put anything in the modal */}
      <button onClick={openMyModal}>Open Modal</button>
      <p>My modal is open? {isMyModalOpen}</p>
      <Modal id="my_modal">
        <h1>Modal Title</h1>
        <p>This is modal content.</p>
        <button onClick={closeMyModal}>Close</button>
      </Modal>
    </div>
  );
};

export default App;

`open` prop

Alternatively you can provide an open prop directly to your modal component and manage state however you would like.

import React, { useState } from "react";
import Modal from "easy-dialog-modal";
import "your-modal-library/dist/styles.css"; // Import the library's styles

const App = () => {
  //component level state
  const [isMyModalOpen, setIsMyModalOpen] = useState(false);

  return (
    <div>
      {/* You can put anything in the modal */}
      <button onClick={() => setIsMyModalOpen(!isMyModalOpen)}>
        Toggle whether modal is open
      </button>
      <p>My modal is open? {isMyModalOpen}</p>
      <Modal id="my_modal" open={isMyModalOpen}>
        <h1>Modal Title</h1>
        <p>This is modal content.</p>
      </Modal>
    </div>
  );
};

export default App;