Skip to content

Commit

Permalink
feat: 🎸 add useBoolean hook
Browse files Browse the repository at this point in the history
  • Loading branch information
streamich committed Oct 29, 2018
1 parent 8e81e8f commit ce6de24
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 2 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
4 changes: 3 additions & 1 deletion docs/useToggle.md
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
23 changes: 23 additions & 0 deletions src/__stories__/useBoolean.story.tsx
Original file line number Diff line number Diff line change
@@ -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/>
)
2 changes: 2 additions & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -38,6 +39,7 @@ export {
useAsync,
useAudio,
useBattery,
useBoolean,
useCounter,
useCss,
useFavicon,
Expand Down
3 changes: 3 additions & 0 deletions src/useBoolean.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import useBoolean from './useToggle';

export default useBoolean;

0 comments on commit ce6de24

Please sign in to comment.