0.0.9 • Published 3 years ago

react-dialog-hook v0.0.9

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

KeyDefaultDescription
isDefaultOpenfalseAllows opening dialog on the first render without the user's intervention.

Results

KeyTypeDescription
isOpenbooleanOpening state of dialog
paramsanyParams which can be passed into hook via open method.
resultsanyResults passed into close method accesible via this key and also as returned value from open method.
openasync (params) => resultsMethod which change dialog state to open and set params passed as argument. Returns results which were set from close method.
closeasync (results) => voidMethod 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 ✨

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago