Merge pull request #26 from streamich/use-boolean

feat: 🎸 add useBoolean hook
This commit is contained in:
Va Da 2018-10-29 15:29:06 +01:00 committed by GitHub
commit c36780d644
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 32 additions and 2 deletions

View File

@ -75,7 +75,7 @@
- [`useGetSet`](./docs/useGetSet.md) — returns state getter `get()` instead of raw state.
- [`useObservable`](./docs/useObservable.md) — tracks latest value of an `Observable`.
- [`useSetState`](./docs/useSetState.md) — creates `setState` method which works like `this.setState`. [![][img-demo]](https://codesandbox.io/s/n75zqn1xp0)
- [`useToggle`](./docs/useToggle.md) — tracks state of a boolean.
- [`useToggle` and `useBoolean`](./docs/useToggle.md) — tracks state of a boolean.
- [`useCounter`](./docs/useCounter.md) — tracks state of a number.
- [`useList`](./docs/useList.md) — tracks state of an array.
- [`useMap`](./docs/useMap.md) — tracks state of an object.

View File

@ -2,11 +2,13 @@
React state hook that tracks value of a boolean.
`useBoolean` is an alias for `useToggle`.
## Usage
```jsx
import {useToggle} from 'react-use';
import {useToggle, useBoolean} from 'react-use';
const Demo = () => {
const [on, toggle] = useToggle(true);

View File

@ -0,0 +1,23 @@
import * as React from 'react';
import {storiesOf} from '@storybook/react';
import {useBoolean} from '..';
import ShowDocs from '../util/ShowDocs';
const Demo = () => {
const [on, toggle] = useBoolean(true);
return (
<div>
<div>{on ? 'ON' : 'OFF'}</div>
<button onClick={() => toggle()}>Toggle</button>
<button onClick={() => toggle(true)}>set ON</button>
<button onClick={() => toggle(false)}>set OFF</button>
</div>
);
};
storiesOf('useBoolean', module)
.add('Docs', () => <ShowDocs md={require('../../docs/useToggle.md')} />)
.add('Demo', () =>
<Demo/>
)

View File

@ -1,6 +1,7 @@
import useAsync from './useAsync';
import useAudio from './useAudio';
import useBattery from './useBattery';
import useBoolean from './useBoolean';
import useCounter from './useCounter';
import useCss from './useCss';
import useFavicon from './useFavicon';
@ -38,6 +39,7 @@ export {
useAsync,
useAudio,
useBattery,
useBoolean,
useCounter,
useCss,
useFavicon,

3
src/useBoolean.ts Normal file
View File

@ -0,0 +1,3 @@
import useBoolean from './useToggle';
export default useBoolean;