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 ✨