Skip to content

Commit

Permalink
feat: 🎸 add useCallbag hook
Browse files Browse the repository at this point in the history
  • Loading branch information
streamich committed Oct 29, 2018
1 parent 2a43c37 commit ead142c
Show file tree
Hide file tree
Showing 8 changed files with 70 additions and 3 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@
<br/>
- [**State**](./docs/State.md)
- [`createMemo`](./docs/createMemo.md) &mdash; factory of memoized hooks.
- [`useCallbag`](./docs/useCallbag.md) &mdash; tracks latest value of a callbag.
- [`useGetSet`](./docs/useGetSet.md) &mdash; returns state getter `get()` instead of raw state.
- [`useGetSetState`](./docs/useGetSetState.md) &mdash; as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby.
- [`useObservable`](./docs/useObservable.md) &mdash; tracks latest value of an `Observable`.
Expand Down
16 changes: 16 additions & 0 deletions docs/useCallbag.md
Original file line number Diff line number Diff line change
@@ -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 <span>{`Counter: ${count}`}</span>
};
```
4 changes: 3 additions & 1 deletion docs/useObservable.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<button onClick={() => counter$.next(value + 1)}>
Clicked {value} times
Expand Down
6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@
"nano-css": "^3.4.0",
"rebound": "^0.1.0",
"ts-easing": "^0.1.0",
"use-onclickoutside": "^0.1.0"
"use-onclickoutside": "^0.1.0",
"use-callbag": "^0.1.2"
},
"devDependencies": {
"@storybook/react": "^3.4.11",
Expand All @@ -52,7 +53,8 @@
"@semantic-release/changelog": "^3.0.1",
"@semantic-release/npm": "^5.0.5",
"@semantic-release/git": "^7.0.5",
"rxjs": "^6.3.3"
"rxjs": "^6.3.3",
"callbag-interval": "^1.1.0"
},
"peerDependencies": {
"react": "16.7.0-alpha.0",
Expand Down
16 changes: 16 additions & 0 deletions src/__stories__/useCallbag.story.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import {useCallbag} from '..';
import * as React from 'react';
import {storiesOf} from '@storybook/react';
import ShowDocs from '../util/ShowDocs';
const interval = require('callbag-interval').default;

const Demo = () => {
const count = useCallbag(() => (interval as any)(1000));
return <span>{`Counter: ${count}`}</span>
};

storiesOf('useCallbag', module)
.add('Docs', () => <ShowDocs md={require('../../docs/useCallbag.md')} />)
.add('Demo', () =>
<Demo/>
)
2 changes: 2 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import useAsync from './useAsync';
import useAudio from './useAudio';
import useBattery from './useBattery';
import useBoolean from './useBoolean';
import useCallbag from './useCallbag';
import useCounter from './useCounter';
import useCss from './useCss';
import useFavicon from './useFavicon';
Expand Down Expand Up @@ -46,6 +47,7 @@ export {
useAudio,
useBattery,
useBoolean,
useCallbag,
useCounter,
useCss,
useFavicon,
Expand Down
4 changes: 4 additions & 0 deletions src/useCallbag.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import useCallbag from 'use-callbag'

export default useCallbag;

24 changes: 24 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2156,6 +2156,23 @@ call-me-maybe@^1.0.1:
resolved "https://registry.yarnpkg.com/call-me-maybe/-/call-me-maybe-1.0.1.tgz#26d208ea89e37b5cbde60250a15f031c16a4d66b"
integrity sha1-JtII6onje1y95gJQoV8DHBak1ms=

callbag-interval@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/callbag-interval/-/callbag-interval-1.1.0.tgz#161ae4b5bf36b98bd5ef7caa3c3f8161fc032338"
integrity sha512-xkYj7t/l9+GaP0kvPi6LadF3ZNSiQAhbEzwnnTrDB/UtkBCrzKPZ9Kiti8P8oHYxL2jGEuRWi86PD3uM7qXLbg==
dependencies:
callbag "^1.1.0"

callbag-subscribe@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/callbag-subscribe/-/callbag-subscribe-1.4.1.tgz#f9bd86b713230c9113acf6b7c5c6baf7d5ec772f"
integrity sha512-FzvJK3ODP50UhZPhfCFwJZ+YP+Hg/6Fm1+d3m2UZacA1b+jSKARpyNTIpkWlf61rAHEgpwZF1head4URY+EEMw==

callbag@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/callbag/-/callbag-1.1.0.tgz#9cbbc3352832da43e764d588ed43121d4b09c42a"
integrity sha512-JVZp2vA53+THwOOan8eedGhS7xwzwR1u8HFK02WDMI9pITGoQ42j2sYP742qs7yddtEjIDGgNe1Y6DN90w3oIQ==

camel-case@3.0.x:
version "3.0.0"
resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
Expand Down Expand Up @@ -9512,6 +9529,13 @@ url@^0.11.0:
punycode "1.3.2"
querystring "0.2.0"

use-callbag@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/use-callbag/-/use-callbag-0.1.2.tgz#8f214952ccc488159b185ffe7ff17fccba7a73d3"
integrity sha512-8JJIpoqQaqJu9nfSTYe4WpJm2NyfHYgIDjouxhu4WOpgYI8W9IvMM32ecfcdZTzkWDuZkEyh3unGLMxA4wF7Bg==
dependencies:
callbag-subscribe "^1.4.1"

use-onclickoutside@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/use-onclickoutside/-/use-onclickoutside-0.1.0.tgz#bc1998fe36728b22a4b9b28c95fbb468b3033e84"
Expand Down

0 comments on commit ead142c

Please sign in to comment.