A tiny library for using native dialog elements in React

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)
onClose	Optional. Fires when the modal is closed.
onCancel	Optional. Fires when the modal is cancelled.

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

Download Details:

Author: mxmul

Source Code: https://github.com/mxmul/use-dialog

#react #reactjs #javascript