React dialog hook

This hook was made to manage dialog state in React. The main feature is a possibility to get results passed as an argument of the close method as a returned value from the open dialog method. See example.

All data (params and results) are also available as returned object keys from the hook.

It's fully written in Typescript.

Usage

Installing

npm i react-dialog-hook

Importing

import { useDialog } from "react-dialog-hook";

It is possible to use already prepared context for dialog:

import { DialogConsumer, DialogProvider, DialogContext } from "react-dialog-hook";

Example

Live demo in codesandbox is available here: https://codesandbox.io/s/react-dialog-hook-demo-b99uy?file=/src/App.tsx

import { useDialog } from "react-hook-dialog";

function Dialog({ isOpen, close, params }) {
  const dialogResult = "RESULT"
  return (
    <>
      {isOpen && (
        <div>
          <h1>DIALOG HEADER</h1>
          <button onClick={() => close(dialogResult)}>close</button>
        </div>
      )}
    </>
  )
}

function Example() {
  const {
    isOpen
    open
    close
    params,
    results
  } = useDialog<ParamsType, ResultsType>({
    isDefaultOpen: false; // Set dialog open after first render
  });

  const openHandler = useCallback(async () => {
    const dialogParams = "PARAM"
    const resultsFromDialog = await open(dialogParams); // It returns results passed as argument to close method
  }, []);

  return (
    <>
      <button onClick={openHandler}>OPEN DIALOG</button>
      <Dialog isOpen={isOpen} close={close} params={params} />
    </>
  )
}

Config

Key	Default	Description
isDefaultOpen	false	Allows opening dialog on the first render without the user's intervention.

Results

Key	Type	Description
isOpen	boolean	Opening state of dialog
params	any	Params which can be passed into hook via open method.
results	any	Results passed into close method accesible via this key and also as returned value from open method.
open	async (params) => results	Method which change dialog state to open and set params passed as argument. Returns results which were set from close method.
close	async (results) => void	Method which change dialog state to close and set results passed as argument.

Bugs reporting

To report a bug connected with lib, please open a new issue, assign one of the authors into it and add the bug label.

Contributing

If you have any idea how to improve this lib, please fork this repo, suggest changes, make a PR and add one of the authors as a reviewer. Don't forget to add a proper description of this feature/bugfix.

Authors ✨

Hubert Stemplewski

Benedykt Dryl

Witold Mętel