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 |