Merge pull request #30 from streamich/useNumber

Use number

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.
     <br/>

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 (
     <div>
-      <div>{value}</div>
+      <div>{value} is {get()}</div>
       <button onClick={() => inc()}>Increment</button>
+      <button onClick={() => dec()}>Decrement</button>
+      <button onClick={() => inc(5)}>Increment (+5)</button>
+      <button onClick={() => dec(5)}>Decrement (-5)</button>
       <button onClick={() => set(100)}>Set 100</button>
+      <button onClick={() => reset()}>Reset</button>
+      <button onClick={() => reset(25)}>Reset (25)</button>
     </div>
   );
 };

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 (
     <div>
-      <div>{value}</div>
+      <div>{value} is {get()}</div>
       <button onClick={() => inc()}>Increment</button>
+      <button onClick={() => dec()}>Decrement</button>
+      <button onClick={() => inc(5)}>Increment (+5)</button>
+      <button onClick={() => dec(5)}>Decrement (-5)</button>
       <button onClick={() => set(100)}>Set 100</button>
+      <button onClick={() => reset()}>Reset</button>
+      <button onClick={() => reset(25)}>Reset (25)</button>
     </div>
   );
 };

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,

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<number>(initialValue);
+const useCounter = (initialValue: number = 0): [number, CounterActions] => {
+  const [get, set] = useGetSet<number>(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;

src/useGetSet.ts

@@ -1,15 +1,14 @@
-import {useRef} from './react';
+import {useRef, useCallback} from './react';
 import useUpdate from './useUpdate';
 
 const useGetSet = <T>(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];
 };

src/useNumber.ts

@@ -0,0 +1,3 @@
+import useNumber from './useCounter';
+
+export default useNumber;