@kamo88/react-dialog-hooks NPM

license npm (scoped)

npm i @kamo88/react-dialog-hooks

Please choose your @version

<script src="https://unpkg.com/@kamo88/react-dialog-hooks@0.9.5/dist/umd/index.js" crossorigin></script>

<!doctype html>
<html>
  <head>
    <script
      src="https://unpkg.com/react@18/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/@kamo88/react-dialog-hooks@0.9.5/dist/umd/index.js"
      crossorigin
    ></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>

    <script type="text/babel">
      function Hello() {
        const { ref, isOpen, showDialog, closeDialog } =
          Kamo88Dialog.useDialog();
        return (
          <div>
            <button type="button" onClick={showDialog}>
              showDialog
            </button>
            <Kamo88Dialog.Dialog
              ref={ref}
              isOpen={isOpen}
              onClickAway={closeDialog}
            >
              <div>
                <div>header</div>
                <div>Hello World!</div>
                <div>
                  <button type="button" onClick={closeDialog}>
                    closeDialog main
                  </button>
                  <button type="button" onClick={closeDialog}>
                    closeDialog sub
                  </button>
                </div>
              </div>
            </Kamo88Dialog.Dialog>
          </div>
        );
      }

      const container = document.getElementById('root');
      const root = ReactDOM.createRoot(container);
      root.render(<Hello />);
    </script>
  </body>
</html>

@kamo88/react-dialog-hooks

This React component & hooks are to be displayed using the \<dialog> tag.

storybook

Description

Hooks for using the dialog tag.
Using body-scroll-lock to stop the body scrolling.
Dialog Component loops focus to a focusable element in the content using focus-trap-react.
Dialog Component can be styled using className. ex) tailwindcss , css modules (@emotion/react is also available)

Usage

useDialog

Normal usage.

Of course, you can also create markup using regular dialog tags.

import { useDialog } from '@kamo88/react-dialog-hooks';

const UseDialogExample = () => {
  const { ref, isOpen, showDialog, closeDialog } = useDialog();

  return (
    <div>
      <button type="button" onClick={showDialog}>
        showDialog
      </button>
      <dialog role="presentation" ref={ref} onClick={closeDialog}>
        <div role="presentation" onClick={(e) => e.stopPropagation()}>
          <div>header</div>
          <div>main</div>
          <div>
            footer
            <button type="button" onClick={closeDialog}>
              closeDialog
            </button>
          </div>
        </div>
      </dialog>
    </div>
  );
};

useDialogPromise

The use of showDialog's return is Promise. Wait for user operation in a Promise and handle it with its return ('main', 'sub', 'abort' type string). ※ The same behavior can be implemented in useDialog, even though Promise cannot be used.

import { useCallback } from 'react';
import { useDialogPromise, DialogResponse } from '@kamo88/react-dialog-hooks';

const UseDialogPromiseExample = () => {
  const {
    ref,
    isOpen,
    showDialog,
    closeDialogMain,
    closeDialogSub,
    closeDialogAbort,
  } = useDialogPromise();

  const handleShowDialog = useCallback(async () => {
    const dialogRes = await showDialog();
    if (dialogRes === DialogResponse.main) {
      // main processing ex) primary button`s action
      return;
    }

    if (dialogRes === DialogResponse.sub) {
      // sub processing ex) secondary button`s action
      return;
    }

    if (dialogRes === DialogResponse.abort) {
      // abort processing ex) click away`s action & This Component`s unmount
    }
  }, [showDialog]);

  return (
    <div>
      <button type="button" onClick={handleShowDialog}>
        showDialog
      </button>
      <dialog role="presentation" ref={ref} onClick={closeDialogAbort}>
        <div role="presentation" onClick={(e) => e.stopPropagation()}>
          <div>header</div>
          <div>main</div>
          <div>
            footer
            <button type="button" onClick={closeDialogMain}>
              closeDialogMain
            </button>
            <button type="button" onClick={closeDialogSub}>
              closeDialogSub
            </button>
          </div>
        </div>
      </dialog>
    </div>
  );
};

Dialog

import { Dialog, useDialog } from '@kamo88/react-dialog-hooks';

const DialogComponentExample = () => {
  const { ref, isOpen, showDialog, closeDialog } = useDialog();

  return (
    <div>
      <button type="button" onClick={showDialog}>
        showDialog
      </button>
      <Dialog
        className="backdrop:bg-gray-900 backdrop:opacity-80"
        ref={ref}
        isOpen={isOpen}
        className="dialogClass"
        shouldFocusTrap
        initialFocus={false}
        onClickAway={closeDialog}
      >
        <div>
          <div>header</div>
          <div>main</div>
          <div>
            footer
            <button type="button" onClick={closeDialog}>
              closeDialog main
            </button>
          </div>
        </div>
      </Dialog>
    </div>
  );
};

Dialog Component Props

key	type	required	default	description
ref	React.RefObject\<HTMLDialogElement>	⭕		dialog ref
children	ReactNode	⭕		dialog contents.Basically, include elements that can focus.
isOpen	boolean	⭕		dialog open state
shouldFocusTrap	boolean		true
initialFocus	undefined or false		undefined	This is based on the focus-trap-react property.
onClickAway	() => void			Event when backdrop in Dialog is clicked.This is an alternative to the click event in the dialog tag.