react-controlled-dialog

    1.3.5 • Public • Published

    React Controlled Dialog

    Declarative React interface for the HTML5 Dialog

    Demo

    https://react-controlled-dialog.netlify.com/

    Installation

    Install through your preferred package manager

    # NPM 
    npm install react-controlled-dialog
     
    # Yarn 
    yarn add react-controlled-dialog

    Then, include the component in your codebase

    import Dialog from "react-controlled-dialog";

    Examples

    A simple dialog:

    import React, { useState } from "react";
    import Dialog from "../lib/ReactControlledDialog";
     
    const Simple = () => {
      const [isOpen, setOpen] = useState(false);
      return (
        <div id="simple">
          <h2>Simple Dialog</h2>
          <p>Click below to open!</p>
          <button onClick={() => setOpen(true)}>Simple Dialog</button>
          <Dialog isOpen={isOpen} setOpen={setOpen}>
            foobar
          </Dialog>
          <p>
            The native dialog component can be activated by passing an{" "}
            <code>open</code> attribute, or by invoking the <code>show()</code>{" "}
            method from the native API.
          </p>
        </div>
      );
    };

    The dialog can be opened as either a dialog (which is default), or as a modal, by specifying a type of "modal" or "dialog".

    Settings

    Option Type Default Description
    children node or array of nodes null Child elements for the dialog can be passed naturally
    isOpen boolean false Whether the dialog should be open (required)
    setOpen function null Function that updates isOpen to switch to true or false (required)
    type string "dialog" Determine whether the dialog should open as a modal or use default behavior
    closeOnBackDropClick boolean or function false Accepts a boolean or a function that evaluates to a boolean to determine whether clicking on the backdrop should close the modal
    DialogComponent node null A custom element that replaces the default, unstyled dialog (should accept a ref, role, and onClick attributes)
    closeButton node null Your custom close button
    onClick function null custom event handler for onClick events for the dialog

    Install

    npm i react-controlled-dialog

    DownloadsWeekly Downloads

    6

    Version

    1.3.5

    License

    ISC

    Unpacked Size

    20.9 MB

    Total Files

    51

    Last publish

    Collaborators

    • krpeacock