mirror of
https://github.com/streamich/react-use.git
synced 2026-01-18 14:06:52 +00:00
Merge pull request #26 from streamich/use-boolean
feat: 🎸 add useBoolean hook
This commit is contained in:
commit
c36780d644
@ -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.
|
||||
|
||||
@ -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);
|
||||
|
||||
23
src/__stories__/useBoolean.story.tsx
Normal file
23
src/__stories__/useBoolean.story.tsx
Normal 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/>
|
||||
)
|
||||
@ -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
3
src/useBoolean.ts
Normal file
@ -0,0 +1,3 @@
|
||||
import useBoolean from './useToggle';
|
||||
|
||||
export default useBoolean;
|
||||
Loading…
x
Reference in New Issue
Block a user