use-dialog

use-dialog

A tiny library for using native <dialog> elements in React.

Installation

npm i use-dialog

Example

import React, { useState } from "react";
import { Dialog } from "use-dialog";

export default function App() {
  const [open, setOpen] = useState(false);

  const show = () => setOpen(true);
  const hide = () => setOpen(false);

  return (
    <>
      <Dialog state={[open, setOpen]}>
        <p>Hello, world!</p>
        <button onClick={hide}>Hide</button>
      </Dialog>

      <button onClick={show}>Show</button>
    </>
  );
}

Demo

Usage

<Dialog>

Prop Name	Description
state	A boolean state variable and setter pair, as returned by useState(). This represents the open / closed state of the modal.
modal	Optional. Should the dialog be a modal? (default: true)

All unknown props are passed along to the underlying <dialog> element.

useDialog

Accepts an object with the same props as above. Returns props to be spread into a native <dialog> element.

E.g:

const {dialogProps} = useDialog({ state: [open, setOpen] });
<dialog {...dialogProps}>Sup!</dialog>

Polyfill

Include this polyfill to provide support for browsers without <dialog> element.

dialog-polyfill