CHANGELOG.md

@@ -1,3 +1,10 @@
+# [12.3.0](https://github.com/streamich/react-use/compare/v12.2.3...v12.3.0) (2019-10-07)
+
+
+### Features
+
+* reset util callback for useList ([#654](https://github.com/streamich/react-use/issues/654)) ([9ea3548](https://github.com/streamich/react-use/commit/9ea3548))
+
 ## [12.2.3](https://github.com/streamich/react-use/compare/v12.2.2...v12.2.3) (2019-10-05)
 
 

README.md

@@ -125,14 +125,14 @@
   - [`useDefault`](./docs/useDefault.md) — returns the default value when state is `null` or `undefined`.
   - [`useGetSet`](./docs/useGetSet.md) — returns state getter `get()` instead of raw state.
   - [`useGetSetState`](./docs/useGetSetState.md) — as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby.
-  - [`usePrevious`](./docs/usePrevious.md) — returns the previous state or props.
+  - [`usePrevious`](./docs/usePrevious.md) — returns the previous state or props. [![][img-demo]](https://codesandbox.io/s/fervent-galileo-krgx6)
   - [`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)
-  - [`useStateList`](./docs/useStateList.md) — circularly iterates over an array.
-  - [`useToggle` and `useBoolean`](./docs/useToggle.md) — tracks state of a boolean.
+  - [`useStateList`](./docs/useStateList.md) — circularly iterates over an array. [![][img-demo]](https://codesandbox.io/s/bold-dewdney-pjzkd)
+  - [`useToggle` and `useBoolean`](./docs/useToggle.md) — tracks state of a boolean. [![][img-demo]](https://codesandbox.io/s/focused-sammet-brw2d)
   - [`useCounter` and `useNumber`](./docs/useCounter.md) — tracks state of a number. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/state-usecounter--demo)
-  - [`useList`](./docs/useList.md) — tracks state of an array.
-  - [`useMap`](./docs/useMap.md) — tracks state of an object.
+  - [`useList`](./docs/useList.md) and [`useUpsert`](./docs/useUpsert.md) — tracks state of an array. [![][img-demo]](https://codesandbox.io/s/wonderful-mahavira-1sm0w)
+  - [`useMap`](./docs/useMap.md) — tracks state of an object. [![][img-demo]](https://codesandbox.io/s/quirky-dewdney-gi161)
 
 
 <br />

docs/useList.md

@@ -2,21 +2,31 @@
 
 React state hook that tracks a value of an array.
 
-
 ## Usage
 
 ```jsx
 import {useList} from 'react-use';
 
 const Demo = () => {
-  const [list, {set, push}] = useList();
+  const [list, { clear, filter, push, remove, set, sort, updateAt, reset }] = useList();
 
   return (
     <div>
-      <div>{list.join(',')}</div>
-      <button onClick={() => set([])}>Reset</button>
-      <button onClick={() => push(Date.now())}>Push</button>
+      <button onClick={() => set([1, 2, 3])}>Set to [1, 2, 3]</button>
+      <button onClick={() => push(Date.now())}>Push timestamp</button>
+      <button onClick={() => updateAt(1, Date.now())}>Update value at index 1</button>
+      <button onClick={() => remove(1)}>Remove element at index 1</button>
+      <button onClick={() => filter(item => item % 2 === 0)}>Filter even values</button>
+      <button onClick={() => sort((a, b) => a - b)}>Sort ascending</button>
+      <button onClick={() => sort((a, b) => b - a)}>Sort descending</button>
+      <button onClick={clear}>Clear</button>
+      <button onClick={reset}>Reset</button>
+      <pre>{JSON.stringify(list, null, 2)}</pre>
     </div>
   );
 };
 ```
+
+## Related hooks
+
+- [useUpsert](./useUpsert.md)

docs/useMap.md

@@ -2,22 +2,28 @@
 
 React state hook that tracks a value of an object.
 
-
 ## Usage
 
 ```jsx
 import {useMap} from 'react-use';
 
 const Demo = () => {
-  const [map, {set, reset}] = useMap({
+  const [map, {set, remove, reset}] = useMap({
     hello: 'there',
   });
 
   return (
     <div>
+      <button onClick={() => set(String(Date.now()), new Date().toJSON())}>
+        Add
+      </button>
+      <button onClick={() => reset()}>
+        Reset
+      </button>
+      <button onClick={() => remove('hello')} disabled={!map.hello}>
+        Remove 'hello'
+      </button>
       <pre>{JSON.stringify(map, null, 2)}</pre>
-      <button onClick={() => set(String(Date.now()), (new Date()).toJSON())}>Add</button>
-      <button onClick={() => reset()}>Reset</button>
     </div>
   );
 };

docs/usePrevious.md

@@ -13,7 +13,11 @@ const Demo = () => {
 
   return (
     <p>
-      Now: {count}, before: {prevCount}
+      <button onClick={() => setCount(count + 1)}>+</button>
+      <button onClick={() => setCount(count - 1)}>-</button>
+      <p>
+        Now: {count}, before: {prevCount}
+      </p>
     </p>
   );
 };

docs/useSearchParam.md

@@ -2,7 +2,6 @@
 
 React sensor hook that tracks browser's location search param.
 
-
 ## Usage
 
 ```jsx
@@ -27,3 +26,7 @@ const Demo = () => {
   );
 };
 ```
+
+## Caveats/Gotchas
+
+When using a hash router, like `react-router`'s [`<HashRouter>`](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md), this hook won't be able to read the search parameters as they are considered part of the hash of the URL by browsers.

docs/useToggle.md

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

docs/useUpsert.md

@@ -1,6 +1,7 @@
 # `useUpsert`
 
-Superset of `useList`. Provides an additional method to upsert (update or insert) an element into the list. 
+Superset of [`useList`](./useList.md). Provides an additional method to upsert (update or insert) an element into the list.
+
 ## Usage
 
 ```jsx
@@ -26,3 +27,7 @@ const Demo = () => {
   );
 };
 ```
+
+## Related hooks
+
+- [useList](./useList.md)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-use",
-  "version": "12.2.3",
+  "version": "12.3.0",
   "description": "Collection of React Hooks",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -50,7 +50,7 @@
     "react-fast-compare": "^2.0.4",
     "react-wait": "^0.3.0",
     "resize-observer-polyfill": "^1.5.1",
-    "screenfull": "^4.1.0",
+    "screenfull": "^5.0.0",
     "set-harmonic-interval": "^1.0.0",
     "throttle-debounce": "^2.0.1",
     "ts-easing": "^0.2.0"
@@ -76,7 +76,7 @@
     "@testing-library/react-hooks": "2.0.3",
     "@types/jest": "24.0.18",
     "@types/react": "16.9.2",
-    "@types/react-wait": "^0.3.0",
+    "@types/react-wait": "0.3.0",
     "babel-core": "6.26.3",
     "babel-loader": "8.0.6",
     "babel-plugin-dynamic-import-node": "2.3.0",

src/__stories__/useList.story.tsx

@@ -4,13 +4,20 @@ import { useList } from '..';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
-  const [list, { set, push }] = useList();
+  const [list, { clear, filter, push, remove, set, sort, updateAt, reset }] = useList([1, 2, 3, 4, 5]);
 
   return (
     <div>
-      <div>{list.join(',')}</div>
-      <button onClick={() => set([])}>Reset</button>
-      <button onClick={() => push(Date.now())}>Push</button>
+      <button onClick={() => set([1, 2, 3])}>Set to [1, 2, 3]</button>
+      <button onClick={() => push(Date.now())}>Push timestamp</button>
+      <button onClick={() => updateAt(1, Date.now())}>Update value at index 1</button>
+      <button onClick={() => remove(1)}>Remove element at index 1</button>
+      <button onClick={() => filter(item => item % 2 === 0)}>Filter even values</button>
+      <button onClick={() => sort((a, b) => a - b)}>Sort ascending</button>
+      <button onClick={() => sort((a, b) => b - a)}>Sort descending</button>
+      <button onClick={clear}>Clear</button>
+      <button onClick={reset}>Reset</button>
+      <pre>{JSON.stringify(list, null, 2)}</pre>
     </div>
   );
 };

src/__stories__/useMap.story.tsx

@@ -4,15 +4,18 @@ import { useMap } from '..';
 import ShowDocs from './util/ShowDocs';
 
 const Demo = () => {
-  const [map, { set, reset }] = useMap({
+  const [map, { set, remove, reset }] = useMap({
     hello: 'there',
   });
 
   return (
     <div>
-      <pre>{JSON.stringify(map, null, 2)}</pre>
       <button onClick={() => set(String(Date.now()), new Date().toJSON())}>Add</button>
       <button onClick={() => reset()}>Reset</button>
+      <button onClick={() => remove('hello')} disabled={!map.hello}>
+        Remove 'hello'
+      </button>
+      <pre>{JSON.stringify(map, null, 2)}</pre>
     </div>
   );
 };

src/__tests__/useList.test.ts

@@ -16,6 +16,7 @@ it('should init list and utils', () => {
     push: expect.any(Function),
     filter: expect.any(Function),
     sort: expect.any(Function),
+    reset: expect.any(Function),
   });
 });
 
@@ -150,3 +151,43 @@ it('should sort current list by provided function', () => {
   expect(result.current[0]).toEqual(['March', 'Jan', 'Feb', 'Dec']);
   expect(result.current[0]).not.toBe(initList); // checking immutability
 });
+
+it('should reset the list to initial list provided', () => {
+  const initList = [1, 2, 3];
+  const { result } = setUp(initList);
+  const [, utils] = result.current;
+
+  act(() => {
+    utils.push(4);
+  });
+
+  expect(result.current[0]).toEqual([1, 2, 3, 4]);
+
+  act(() => {
+    utils.reset();
+  });
+
+  expect(result.current[0]).toEqual([1, 2, 3]);
+  expect(result.current[0]).not.toBe(initList); // checking immutability
+});
+
+it('should memoized its utils methods', () => {
+  const initList = [1, 2, 3];
+  const { result } = setUp(initList);
+  const [, utils] = result.current;
+  const { set, clear, updateAt, remove, push, filter, sort, reset } = utils;
+
+  act(() => {
+    push(4);
+  });
+
+  expect(result.current[1]).toBe(utils);
+  expect(result.current[1].set).toBe(set);
+  expect(result.current[1].clear).toBe(clear);
+  expect(result.current[1].updateAt).toBe(updateAt);
+  expect(result.current[1].remove).toBe(remove);
+  expect(result.current[1].push).toBe(push);
+  expect(result.current[1].filter).toBe(filter);
+  expect(result.current[1].sort).toBe(sort);
+  expect(result.current[1].reset).toBe(reset);
+});

src/useFullscreen.ts

@@ -26,7 +26,7 @@ const useFullscreen = (ref: RefObject<Element>, on: boolean, options: FullScreen
     };
 
     const onChange = () => {
-      if (screenfull) {
+      if (screenfull.isEnabled) {
         const isScreenfullFullscreen = screenfull.isFullscreen;
         setIsFullscreen(isScreenfullFullscreen);
         if (!isScreenfullFullscreen) {
@@ -35,7 +35,7 @@ const useFullscreen = (ref: RefObject<Element>, on: boolean, options: FullScreen
       }
     };
 
-    if (screenfull && screenfull.enabled) {
+    if (screenfull.isEnabled) {
       try {
         screenfull.request(ref.current);
         setIsFullscreen(true);
@@ -55,7 +55,7 @@ const useFullscreen = (ref: RefObject<Element>, on: boolean, options: FullScreen
 
     return () => {
       setIsFullscreen(false);
-      if (screenfull && screenfull.enabled) {
+      if (screenfull.isEnabled) {
         try {
           screenfull.off('change', onChange);
           screenfull.exit();

src/useList.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 
 export interface Actions<T> {
   set: (list: T[]) => void;
@@ -8,14 +8,14 @@ export interface Actions<T> {
   push: (item: T) => void;
   filter: (fn: (value: T) => boolean) => void;
   sort: (fn?: (a: T, b: T) => number) => void;
+  reset: () => void;
 }
 
 const useList = <T>(initialList: T[] = []): [T[], Actions<T>] => {
   const [list, set] = useState<T[]>(initialList);
 
-  return [
-    list,
-    {
+  const utils = useMemo<Actions<T>>(
+    () => ({
       set,
       clear: () => set([]),
       updateAt: (index, entry) =>
@@ -24,8 +24,12 @@ const useList = <T>(initialList: T[] = []): [T[], Actions<T>] => {
       push: entry => set(currentList => [...currentList, entry]),
       filter: fn => set(currentList => currentList.filter(fn)),
       sort: (fn?) => set(currentList => [...currentList].sort(fn)),
-    },
-  ];
+      reset: () => set([...initialList]),
+    }),
+    [set]
+  );
+
+  return [list, utils];
 };
 
 export default useList;

yarn.lock

@@ -2227,7 +2227,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-wait@^0.3.0":
+"@types/react-wait@0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@types/react-wait/-/react-wait-0.3.0.tgz#6f7ef17571a17e72c7864ede8cf7d3aa525a005e"
   integrity sha512-5jIfDcHRjqeE7QfZG7kCqOpfrPSvOM1E3/nlKuJ/NZrG/WrhLo/AFr0i72jhTWzyNRo4ex0pshBaiCHksZXH3A==
@@ -11239,10 +11239,10 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-screenfull@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-4.1.0.tgz#30eb338f615941f5a2cdd96c14e36063d2d9d764"
-  integrity sha512-/qH0HAmc+ilbZ9Vf8J7RHjjecSdqmjIh98iMkA6uCSKcHdJK1TiXhTbR+cin8rG70xi4Peyz7wW1KJVP6sp30g==
+screenfull@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.0.0.tgz#5c2010c0e84fd4157bf852877698f90b8cbe96f6"
+  integrity sha512-yShzhaIoE9OtOhWVyBBffA6V98CDCoyHTsp8228blmqYy1Z5bddzE/4FPiJKlr8DVR4VBiiUyfPzIQPIYDkeMA==
 
 scrollbarwidth@^0.1.3:
   version "0.1.3"