diff --git a/README.md b/README.md index db966005..0358f316 100644 --- a/README.md +++ b/README.md @@ -79,7 +79,7 @@ - [`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` and `useBoolean`](./docs/useToggle.md) — tracks state of a boolean. - - [`useCounter`](./docs/useCounter.md) — tracks state of a number. + - [`useCounter` and `useNumber`](./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.
diff --git a/docs/useCounter.md b/docs/useCounter.md index 30b0672c..a64102a8 100644 --- a/docs/useCounter.md +++ b/docs/useCounter.md @@ -2,20 +2,27 @@ React state hook that tracks a numeric value. +`useNumber` is an alias for `useCounter`. + ## Usage ```jsx -import {useCounter} from 'react-use'; +import {useCounter, useNumber} from 'react-use'; const Demo = () => { - const [value, inc, set] = useCounter(); + const [value, {inc, dec, get, set, reset}] = useCounter(5); return (
-
{value}
+
{value} is {get()}
+ + + + +
); }; diff --git a/src/__stories__/useCounter.story.tsx b/src/__stories__/useCounter.story.tsx index 1c842e10..a888a732 100644 --- a/src/__stories__/useCounter.story.tsx +++ b/src/__stories__/useCounter.story.tsx @@ -4,13 +4,18 @@ import {useCounter} from '..'; import ShowDocs from '../util/ShowDocs'; const Demo = () => { - const [value, inc, set] = useCounter(); + const [value, {inc, dec, get, set, reset}] = useCounter(5); return (
-
{value}
+
{value} is {get()}
+ + + + +
); }; diff --git a/src/index.ts b/src/index.ts index b32ad71a..b57e7a86 100644 --- a/src/index.ts +++ b/src/index.ts @@ -21,6 +21,7 @@ import useMediaDevices from './useMediaDevices'; import useMotion from './useMotion'; import useMount from './useMount'; import useNetwork from './useNetwork'; +import useNumber from './useNumber'; import useObservable from './useObservable'; import useOrientation from './useOrientation'; import useRaf from './useRaf'; @@ -60,6 +61,7 @@ export { useMotion, useMount, useNetwork, + useNumber, useObservable, useOrientation, useRaf, diff --git a/src/useCounter.ts b/src/useCounter.ts index 975efed1..1a8dcf24 100644 --- a/src/useCounter.ts +++ b/src/useCounter.ts @@ -1,12 +1,31 @@ -import {useState} from './react'; +import useGetSet from './useGetSet'; +import {useCallback} from './react'; -export type Increment = (inc?: number) => void; -export type Set = (value: number) => void; +export interface CounterActions { + inc: (delta?: number) => void; + dec: (delta?: number) => void; + get: () => number; + set: (value: number) => void; + reset: (value?: number) => void; +} -const useCounter = (initialValue: number = 0): [number, Increment, Set] => { - const [value, set] = useState(initialValue); +const useCounter = (initialValue: number = 0): [number, CounterActions] => { + const [get, set] = useGetSet(initialValue); + const inc = useCallback((delta: number = 1) => set(get() + delta), []); + const dec = useCallback((delta: number = 1) => inc(-delta), []); + const reset = useCallback((value: number = initialValue) => { + initialValue = value; + set(value); + }, []); + const actions = { + inc, + dec, + get, + set, + reset, + }; - return [value, (inc = 1) => set(value + inc), set]; + return [get(), actions]; }; export default useCounter; diff --git a/src/useGetSet.ts b/src/useGetSet.ts index 6e76bbb3..e9191c84 100644 --- a/src/useGetSet.ts +++ b/src/useGetSet.ts @@ -1,15 +1,14 @@ -import {useRef} from './react'; +import {useRef, useCallback} from './react'; import useUpdate from './useUpdate'; const useGetSet = (initialValue: T): [() => T, (value: T) => void] => { - const update = useUpdate(); let state = useRef(initialValue); - - const get = () => state.current; - const set = (value: T) => { + const update = useUpdate(); + const get = useCallback(() => state.current, []); + const set = useCallback((value: T) => { state.current = value; update(); - }; + }, []); return [get, set]; }; diff --git a/src/useNumber.ts b/src/useNumber.ts new file mode 100644 index 00000000..79393d5f --- /dev/null +++ b/src/useNumber.ts @@ -0,0 +1,3 @@ +import useNumber from './useCounter'; + +export default useNumber;