Skip to content

Commit 61c6058

Browse files
fstreamich
authored andcommitted
feat: add useWait hook
1 parent eca432a commit 61c6058

File tree

7 files changed

+16536
-1
lines changed

7 files changed

+16536
-1
lines changed

README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
- [`useOutsideClick`](./docs/useOutsideClick.md) — triggers callback when user clicks outside target area.
5252
- [`useSpeech`](./docs/useSpeech.md) — synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m)
5353
- [`useVideo`](./docs/useVideo.md) — plays video, tracks its state, and exposes playback controls.
54+
- [`useWait`](./docs/useWait.md) — complex waiting management for UIs.
5455
<br/>
5556
<br/>
5657
- [**Animations**](./docs/Animations.md)

docs/useWait.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# `useWait`
2+
3+
React waiting management hook.
4+
5+
## Usage
6+
7+
```jsx
8+
import { useWait } from 'react-use'
9+
10+
function UserCreateButton() {
11+
const { startWaiting, endWaiting, isWaiting, Wait } = useWait();
12+
13+
return (
14+
<button
15+
onClick={() => startWaiting("creating user")}
16+
disabled={isWaiting("creating user")}
17+
>
18+
<Wait message="creating user" waiting={<div>Creating user!</div>}>
19+
Create User
20+
</Wait>
21+
</button>
22+
);
23+
}
24+
```
25+
26+
And you should wrap your `App` with `Waiter` component. It's actually a `Context.Provider` that provides a loading context to the component tree.
27+
28+
```jsx
29+
const rootElement = document.getElementById("root");
30+
ReactDOM.render(
31+
<useWait.Waiter>
32+
<App />
33+
</useWait.Waiter>,
34+
rootElement
35+
);
36+
```

0 commit comments

Comments
 (0)