From ead142c6fb84552edbcb71558d8102e1f729b989 Mon Sep 17 00:00:00 2001 From: streamich Date: Mon, 29 Oct 2018 22:07:54 +0100 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20useCallbag=20hook?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 1 + docs/useCallbag.md | 16 ++++++++++++++++ docs/useObservable.md | 4 +++- package.json | 6 ++++-- src/__stories__/useCallbag.story.tsx | 16 ++++++++++++++++ src/index.ts | 2 ++ src/useCallbag.ts | 4 ++++ yarn.lock | 24 ++++++++++++++++++++++++ 8 files changed, 70 insertions(+), 3 deletions(-) create mode 100644 docs/useCallbag.md create mode 100644 src/__stories__/useCallbag.story.tsx create mode 100644 src/useCallbag.ts diff --git a/README.md b/README.md index c7e2e843c3..8f5af6c53c 100644 --- a/README.md +++ b/README.md @@ -77,6 +77,7 @@
- [**State**](./docs/State.md) - [`createMemo`](./docs/createMemo.md) — factory of memoized hooks. + - [`useCallbag`](./docs/useCallbag.md) — tracks latest value of a callbag. - [`useGetSet`](./docs/useGetSet.md) — returns state getter `get()` instead of raw state. - [`useGetSetState`](./docs/useGetSetState.md) — as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby. - [`useObservable`](./docs/useObservable.md) — tracks latest value of an `Observable`. diff --git a/docs/useCallbag.md b/docs/useCallbag.md new file mode 100644 index 0000000000..9e99c36266 --- /dev/null +++ b/docs/useCallbag.md @@ -0,0 +1,16 @@ +# `useCallbag` + +React state hook that tracks the latest value of a callbag. + + +## Usage + +```jsx +import {useCallbag} from 'react-use'; +import interval from 'callbag-interval'; + +const Demo = () => { + const count = useCallbag(() => interval(1000)); + return {`Counter: ${count}`} +}; +``` diff --git a/docs/useObservable.md b/docs/useObservable.md index e3411a3b65..6d57af64ee 100644 --- a/docs/useObservable.md +++ b/docs/useObservable.md @@ -6,10 +6,12 @@ React state hook that tracks the latest value of an `Observable`. ## Usage ```jsx +import {useObservable} from 'react-use'; + const counter$ = new BehaviorSubject(0); const Demo = () => { const value = useObservable(counter$, 0); - + return (