react-controlled-dialog
v1.0.5 React Dialog Component Modal
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 |
npm i [email protected]
Metadata
- ISC
- Whatever
- Kyle Peacock
- released 11/24/2018