CHANGELOG.md

@@ -1,3 +1,10 @@
+## [12.2.1](https://github.com/streamich/react-use/compare/v12.2.0...v12.2.1) (2019-09-23)
+
+
+### Bug Fixes
+
+* remove attempt from deps of retry in useAsyncRetry ([#614](https://github.com/streamich/react-use/issues/614)) ([adce59e](https://github.com/streamich/react-use/commit/adce59e))
+
 # [12.2.0](https://github.com/streamich/react-use/compare/v12.1.0...v12.2.0) (2019-09-02)
 
 

docs/useCopyToClipboard.md

@@ -18,22 +18,15 @@ const Demo = () => {
         : state.value && <p>Copied {state.value}</p>}
     </div>
   )
-
-  const [text, setText] = React.useState('');
-  const [copied, copyToClipboard] = useCopyToClipboard(text);
-
-  return (
-    <div>
-      <input value={text} onChange={e => setText(e.target.value)} />
-      <button type="button" onClick={copyToClipboard}>copy text</button>
-      <div>Copied: {copied ? 'Yes' : 'No'}</div>
-    </div>
-  )
 }
 ```
 
 ## Reference
 
 ```js
-const [state, copyToClipboard] = useCopyToClipboard();
+const [{value, error, noUserInteraction}, copyToClipboard] = useCopyToClipboard();
 ```
+
+- `value` &mdash; value that was copied to clipboard, undefined when nothing was copied.
+- `error` &mdash; catched error when trying to copy to clipboard.
+- `noUserInteraction` &mdash; boolean indicating if user interaction was required to copy the value to clipboard to expose full API from underlying [`copy-to-clipboard`](https://github.com/sudodoki/copy-to-clipboard) library.

docs/useSize.md

@@ -9,7 +9,8 @@ import {useSize} from 'react-use';
 
 const Demo = () => {
   const [sized, {width, height}] = useSize(
-    ({width}) => <div style={{border: '1px solid red'}}>Size me up! ({width}px)</div>
+    ({width}) => <div style={{border: '1px solid red'}}>Size me up! ({width}px)</div>,
+    { width: 100, height: 100 }
   );
 
   return (
@@ -21,3 +22,12 @@ const Demo = () => {
   );
 };
 ```
+
+## Reference
+
+```js
+useSize(element, initialSize);
+```
+
+- `element` &mdash; sized element.
+- `initialSize` &mdash; initial size containing a `width` and `height` key.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-use",
-  "version": "12.2.0",
+  "version": "12.2.1",
   "description": "Collection of React Hooks",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -61,11 +61,11 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@babel/core": "7.5.5",
+    "@babel/core": "7.6.0",
     "@babel/plugin-syntax-dynamic-import": "7.2.0",
-    "@babel/preset-env": "7.5.5",
+    "@babel/preset-env": "7.6.0",
     "@babel/preset-react": "7.0.0",
-    "@babel/preset-typescript": "7.3.3",
+    "@babel/preset-typescript": "7.6.0",
     "@semantic-release/changelog": "3.0.4",
     "@semantic-release/git": "7.0.16",
     "@semantic-release/npm": "5.1.13",
@@ -85,7 +85,7 @@
     "husky": "3.0.5",
     "jest": "24.9.0",
     "keyboardjs": "2.5.1",
-    "lint-staged": "9.2.5",
+    "lint-staged": "9.3.0",
     "markdown-loader": "5.1.0",
     "prettier": "1.18.2",
     "raf-stub": "3.0.0",
@@ -98,15 +98,15 @@
     "redux-logger": "3.0.6",
     "redux-thunk": "2.3.0",
     "rimraf": "3.0.0",
-    "rxjs": "6.5.2",
+    "rxjs": "6.5.3",
     "semantic-release": "15.13.24",
-    "ts-loader": "6.0.4",
-    "ts-node": "8.3.0",
-    "tslint": "5.19.0",
+    "ts-loader": "6.1.2",
+    "ts-node": "8.4.1",
+    "tslint": "5.20.0",
     "tslint-config-prettier": "1.18.0",
     "tslint-eslint-rules": "5.4.0",
     "tslint-plugin-prettier": "2.0.1",
-    "tslint-react": "4.0.0",
+    "tslint-react": "4.1.0",
     "typescript": "3.5.3"
   },
   "config": {

src/__tests__/useMap.test.ts

@@ -106,3 +106,16 @@ it('should reset map to initial object provided', () => {
 
   expect(result.current[0]).toEqual({ foo: 'bar', a: 1 });
 });
+
+it('should memoized its utils methods', () => {
+  const { result } = setUp({ foo: 'bar', a: 1 });
+  const [, utils] = result.current;
+  const { set } = utils;
+
+  act(() => {
+    set('foo', 'baz');
+  });
+
+  expect(result.current[1]).toBe(utils);
+  expect(result.current[1].set).toBe(set);
+});

src/__tests__/useThrottle.test.ts

@@ -0,0 +1,73 @@
+import { renderHook } from '@testing-library/react-hooks';
+import useThrottle from '../useThrottle';
+
+describe('useThrottle', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  it('should be defined', () => {
+    expect(useThrottle).toBeDefined();
+  });
+
+  it('should have a value to be returned', () => {
+    const { result } = renderHook(() => useThrottle(0, 100));
+    expect(result.current).toBe(0);
+  });
+
+  it('should has same value if time is advanced less than the given time', () => {
+    const { result, rerender } = renderHook(props => useThrottle(props, 100), { initialProps: 0 });
+    expect(result.current).toBe(0);
+    rerender(1);
+    jest.advanceTimersByTime(50);
+    expect(result.current).toBe(0);
+  });
+
+  it('should update the value after the given time when prop change', done => {
+    const hook = renderHook(props => useThrottle(props, 100), { initialProps: 0 });
+    expect(hook.result.current).toBe(0);
+    hook.rerender(1);
+    expect(hook.result.current).toBe(0);
+    hook.waitForNextUpdate().then(() => {
+      expect(hook.result.current).toBe(1);
+      done();
+    });
+    jest.advanceTimersByTime(100);
+  });
+
+  it('should use the default ms value when missing', done => {
+    const hook = renderHook(props => useThrottle(props), { initialProps: 0 });
+    expect(hook.result.current).toBe(0);
+    hook.rerender(1);
+    hook.waitForNextUpdate().then(() => {
+      expect(hook.result.current).toBe(1);
+      done();
+    });
+    jest.advanceTimersByTime(200);
+  });
+
+  it('should not update the value after the given time', () => {
+    const hook = renderHook(props => useThrottle(props, 100), { initialProps: 0 });
+    expect(hook.result.current).toBe(0);
+    jest.advanceTimersByTime(100);
+    expect(hook.result.current).toBe(0);
+  });
+
+  it('should cancel timeout on unmount', () => {
+    const hook = renderHook(props => useThrottle(props, 100), { initialProps: 0 });
+    expect(hook.result.current).toBe(0);
+    hook.rerender(1);
+    hook.unmount();
+    expect(jest.getTimerCount()).toBe(0);
+    jest.advanceTimersByTime(100);
+    expect(hook.result.current).toBe(0);
+  });
+});

src/__tests__/useThrottleFn.test.ts

@@ -0,0 +1,98 @@
+import { renderHook, RenderHookResult } from '@testing-library/react-hooks';
+import { useThrottleFn } from '../';
+
+describe('useThrottleFn', () => {
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
+  it('should be defined', () => {
+    expect(useThrottleFn).toBeDefined();
+  });
+
+  const getHook = <T>(initialProps: T, ms?: number): [Function, RenderHookResult<T, T>] => {
+    const mockFn = jest.fn(props => props);
+    return [mockFn, renderHook(props => useThrottleFn(mockFn, ms, [props]), { initialProps })];
+  };
+
+  it('should return the value that the given function return', () => {
+    const [fn, hook] = getHook(10, 100);
+
+    expect(hook.result.current).toBe(10);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+
+  it('should has same value if time is advanced less than the given time', () => {
+    const [fn, hook] = getHook(10, 100);
+
+    expect(hook.result.current).toBe(10);
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    hook.rerender(20);
+    jest.advanceTimersByTime(50);
+
+    expect(hook.result.current).toBe(10);
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(jest.getTimerCount()).toBe(1);
+  });
+
+  it('should update the value after the given time when arguments change', done => {
+    const [fn, hook] = getHook('boo', 100);
+
+    expect(hook.result.current).toBe('boo');
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    hook.rerender('foo');
+    hook.waitForNextUpdate().then(() => {
+      expect(hook.result.current).toBe('foo');
+      expect(fn).toHaveBeenCalledTimes(2);
+      done();
+    });
+    jest.advanceTimersByTime(100);
+  });
+
+  it('should use the default ms value when missing', done => {
+    const [fn, hook] = getHook('boo');
+
+    expect(hook.result.current).toBe('boo');
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    hook.rerender('foo');
+    hook.waitForNextUpdate().then(() => {
+      expect(hook.result.current).toBe('foo');
+      expect(fn).toHaveBeenCalledTimes(2);
+      done();
+    });
+    jest.advanceTimersByTime(200);
+  });
+  it('should not exist timer when arguments did not update after the given time', () => {
+    const [fn, hook] = getHook('boo', 100);
+
+    expect(hook.result.current).toBe('boo');
+    expect(fn).toHaveBeenCalledTimes(1);
+    expect(jest.getTimerCount()).toBe(1);
+
+    jest.advanceTimersByTime(100);
+
+    expect(jest.getTimerCount()).toBe(0);
+  });
+  it('should cancel timeout on unmount', () => {
+    const [fn, hook] = getHook('boo', 100);
+
+    expect(hook.result.current).toBe('boo');
+    expect(fn).toHaveBeenCalledTimes(1);
+
+    hook.rerender('foo');
+    hook.unmount();
+
+    expect(jest.getTimerCount()).toBe(0);
+    jest.advanceTimersByTime(100);
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
+});

src/useAsyncRetry.ts

@@ -20,7 +20,7 @@ const useAsyncRetry = <T>(fn: () => Promise<T>, deps: DependencyList = []) => {
     }
 
     setAttempt(currentAttempt => currentAttempt + 1);
-  }, [...deps, stateLoading, attempt]);
+  }, [...deps, stateLoading]);
 
   return { ...state, retry };
 };

src/useMap.ts

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 
 export interface Actions<T extends object> {
   get: <K extends keyof T>(key: K) => T[K];
@@ -10,25 +10,27 @@ export interface Actions<T extends object> {
 const useMap = <T extends object = any>(initialMap: T = {} as T): [T, Actions<T>] => {
   const [map, set] = useState<T>(initialMap);
 
-  return [
-    map,
-    {
-      get: (key: keyof T) => map[key as string],
-      set: <K extends keyof T>(key: K, entry: T[K]) => {
+  const utils = useMemo<Actions<T>>(
+    () => ({
+      get: key => map[key],
+      set: (key, entry) => {
         set(prevMap => ({
           ...prevMap,
           [key]: entry,
         }));
       },
-      remove: (key: keyof T) => {
+      remove: key => {
         set(prevMap => {
           const { [key]: omit, ...rest } = prevMap;
           return rest as T;
         });
       },
       reset: () => set(initialMap),
-    },
-  ];
+    }),
+    [set]
+  );
+
+  return [map, utils];
 };
 
 export default useMap;