https://github.com/evgenyifedotov/use-promise-element
🛠React hook 'useNodePromise'
https://github.com/evgenyifedotov/use-promise-element
hook node promise react react-element react-hook react-node types typescript
Last synced: 10 months ago
JSON representation
🛠React hook 'useNodePromise'
- Host: GitHub
- URL: https://github.com/evgenyifedotov/use-promise-element
- Owner: EvgenyiFedotov
- License: mit
- Created: 2019-11-27T06:51:24.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T12:12:43.000Z (almost 3 years ago)
- Last Synced: 2025-03-18T15:47:22.242Z (10 months ago)
- Topics: hook, node, promise, react, react-element, react-hook, react-node, types, typescript
- Language: TypeScript
- Homepage:
- Size: 2.52 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🛠React hook 'usePromiseElement'
[](https://www.npmjs.com/package/use-promise-element) [](https://bundlephobia.com/result?p=use-promise-element)   [](https://evgenyifedotov.github.io/use-promise-element)
This hook was created to solve the problem with confirm modal window. But one you can use to solve other tasks if you wrap sub component into promise and waiting answer of him.
## Install
```sh
# npm
npm install use-promise-element
# yarn
yarn add use-promise-element
```
## Documentation
### Methods
#### `usePromiseElement` (export)
[`[GetProps]`](#getprops-export) [`[UsePromiseElement]`](#UsePromiseElement)
```ts
/**
* @param component React component witch will be create when run method 'open'
* @param getProps Function to getting props 'component' when run method 'open'
*/
export declare const usePromiseElement: <
Result = any,
Props extends object = {}
>(
component:
| React.ComponentClass
| React.FC,
getProps?: GetProps | undefined,
) => UsePromiseElement;
```
### Types
#### `GetProps` (export)
```ts
/**
* Type method getting props
*/
type GetProps<
Result = any,
Props extends object = {
onSuccess(): void;
onCancel(): void;
}
> = (
resolve: (value?: Result | PromiseLike | undefined) => void,
reject: (reason?: any) => void,
) => Props;
```
#### `UsePromiseElement`
[`[Open]`](#Open) [`[Close]`](#Close)
```ts
/**
* Type returns hook 'usePromiseElement'
*/
type UsePromiseElement = [
React.ReactElement | null,
Open,
Close,
];
```
#### `Open`
[`[GetProps]`](#getprops-export)
```ts
/**
* Type method opening component
*/
type Open = (
getProps?: GetProps,
) => Promise;
```
#### `Close`
[`[CloseCallback]`](#CloseCallback)
```ts
/**
* Type method closing component
*/
type Close = (callback?: CloseCallback) => void;
```
#### `CloseCallback`
```ts
/**
* Function callback for run getting result promise
*/
type CloseCallback = (
resolve: (value?: Result | PromiseLike | undefined) => void,
reject: (reason?: any) => void,
) => void;
```
## Examples
It is simple example, for get more examples see [**storybook**](https://evgenyifedotov.github.io/use-promise-element).
_./src/modal.tsx_
```tsx
import * as React from "react";
export interface ModalProps {
onSuccess?(): void;
onCancel?(): void;
}
export const Modal: React.FC = (props) => {
return (
Modal window
Success
Cancel
);
};
```
_./src/app.tsx_
```tsx
import * as React from "react";
import { usePromiseElement } from "use-promise-element";
import { Modal } from "./modal";
export const App: React.FC = () => {
/**
* Use hook with set default props for component
* (resolve, reject) => ({ onSuccess: resolve, onCancel: reject })
*/
const [modal, open] = usePromiseElement(Modal);
const clickOpne = React.useCallback(async () => {
try {
// Open Modal (create Modal)
await open();
// Code after click on button 'Success' in Modal
} catch (e) {
// Code after click on button 'Cancel' in Modal
}
}, [open]);
return (
Open
{/* insert modal */}
{modal}
);
};
```
## Tests
```sh
# npm
npm install
npm run test
# yarn
yarn install
yarn test
```