v15 release

BREAKING CHANGE: implementation of useMeasure and useLocalStorage changed

.github/FUNDING.yml

@@ -1,3 +1,100 @@
 # These are supported funding model platforms
 
-github: streamich
+github: [
+  "streamich",
+  "wardoost",
+  "xobotyi",
+  "Belco90",
+  "ankithkonda",
+  "ayush987goyal",
+  "NullVoxPopuli",
+  "lintuming",
+  "Granipouss",
+  "ythecombinator",
+  "james2406",
+  "jakapatb",
+  "MrHuangJser",
+  "zaguiini",
+  "ppeeou",
+  "liuyuchenzh",
+  "brickspert",
+  "artywhite",
+  "PetterIve",
+  "realdennis",
+  "lvl99",
+  "gelove",
+  "KusStar",
+  "xiaoxiangmoe",
+  "nmccready",
+  "mattleonowicz",
+  "kevinnorris",
+  "dubzzz",
+  "dependabot[bot]",
+  "ShizukuIchi",
+  "ManojBahuguna",
+  "Jivings",
+  "Dosant",
+  "zsh2401",
+  "xiaoboost",
+  "revskill10",
+  "mtinner",
+  "monkeywithacupcake",
+  "mitchheddles",
+  "maxzitron",
+  "macinjoke",
+  "jeetiss",
+  "ilyalesik",
+  "hijiangtao",
+  "f",
+  "elliottsj",
+  "droganov",
+  "denysdovhan",
+  "dabuside",
+  "benneq",
+  "azukaar",
+  "ariesjia",
+  "andrico1234",
+  "adesurirey",
+  "OBe95",
+  "FredyC",
+  "Cretezy",
+  "zyy7259",
+  "zslabs",
+  "vinitsood",
+  "uxitten",
+  "thevtm",
+  "tanem",
+  "suyingtao",
+  "srph",
+  "rkostrzewski",
+  "qianL93",
+  "o-alexandrov",
+  "nucleartux",
+  "natew",
+  "maxmalov",
+  "liaoyinglong",
+  "koenvanzuijlen",
+  "josmardias",
+  "jeemyeong",
+  "jazzqi",
+  "jakyle",
+  "jakeboone02",
+  "inker",
+  "glarivie",
+  "garrettmaring",
+  "dovidweisz",
+  "daniel-hauser",
+  "d-asensio",
+  "charlax",
+  "TylerR909",
+  "Rogdham",
+  "OctoD",
+  "MajorBreakfast",
+  "Jfelix61",
+  "Flydiverny",
+  "FlickerLogicalStack",
+  "DmacMcgreg",
+  "Dattaya",
+  "Andrey-Bazhanov",
+  "AlvaroBernalG"
+]

docs/useAsyncFn.md

@@ -32,5 +32,5 @@ const Demo = ({url}) => {
 ## Reference
 
 ```ts
-useAsyncFn(fn, deps?: any[]);
+useAsyncFn<Result, Args>(fn, deps?: any[], initialState?: AsyncState<Result>);
 ```

docs/useLocalStorage.md

@@ -8,13 +8,14 @@ React side-effect hook that manages a single `localStorage` key.
 import { useLocalStorage } from 'react-use';
 
 const Demo = () => {
-  const [value, setValue] = useLocalStorage('my-key', 'foo');
+  const [value, setValue, remove] = useLocalStorage('my-key', 'foo');
 
   return (
     <div>
       <div>Value: {value}</div>
       <button onClick={() => setValue('bar')}>bar</button>
       <button onClick={() => setValue('baz')}>baz</button>
+      <button onClick={() => remove()}>Remove</button>
     </div>
   );
 };

docs/useMeasure.md

@@ -25,6 +25,21 @@ const Demo = () => {
 };
 ```
 
+This hook uses [`ResizeObserver` API][resize-observer], if you want to support 
+legacy browsers, consider installing [`resize-observer-polyfill`][resize-observer-polyfill] 
+before running your app. 
+
+```js
+if (!window.ResizeObserver) {
+  window.ResizeObserver = (await import('resize-observer-polyfill')).default;
+}
+```
+
+
 ## Related hooks
 
 - [useSize](./useSize.md)
+
+
+[resize-observer]: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+[resize-observer-polyfill]: https://www.npmjs.com/package/resize-observer-polyfill

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-use",
-  "version": "14.3.0",
+  "version": "15.0.0-alpha.1",
   "description": "Collection of React Hooks",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -169,7 +169,7 @@
       "<rootDir>/tests/**/*.test.(ts|tsx)"
     ],
     "setupFiles": [
-      "./tests/setupTests.ts"
+      "<rootDir>/tests/setupTests.ts"
     ]
   }
 }

src/useAsync.ts

@@ -1,13 +1,11 @@
 import { DependencyList, useEffect } from 'react';
 import useAsyncFn from './useAsyncFn';
+import { FnReturningPromise } from './util';
 
-export { AsyncState, AsyncFn } from './useAsyncFn';
+export { AsyncState, AsyncFnReturn } from './useAsyncFn';
 
-export default function useAsync<Result = any, Args extends any[] = any[]>(
-  fn: (...args: Args | []) => Promise<Result>,
-  deps: DependencyList = []
-) {
-  const [state, callback] = useAsyncFn<Result, Args>(fn, deps, {
+export default function useAsync<T extends FnReturningPromise>(fn: T, deps: DependencyList = []) {
+  const [state, callback] = useAsyncFn(fn, deps, {
     loading: true,
   });
 

src/useAsyncFn.ts

@@ -1,13 +1,19 @@
 /* eslint-disable */
 import { DependencyList, useCallback, useState, useRef } from 'react';
 import useMountedState from './useMountedState';
+import { FnReturningPromise, PromiseType } from './util';
 
 export type AsyncState<T> =
   | {
       loading: boolean;
       error?: undefined;
       value?: undefined;
     }
+  | {
+      loading: true;
+      error?: Error | undefined;
+      value?: T;
+    }
   | {
       loading: false;
       error: Error;
@@ -19,24 +25,22 @@ export type AsyncState<T> =
       value: T;
     };
 
-export type AsyncFn<Result = any, Args extends any[] = any[]> = [
-  AsyncState<Result>,
-  (...args: Args | []) => Promise<Result>
-];
+type StateFromFnReturningPromise<T extends FnReturningPromise> = AsyncState<PromiseType<ReturnType<T>>>;
 
-export default function useAsyncFn<Result = any, Args extends any[] = any[]>(
-  fn: (...args: Args | []) => Promise<Result>,
+export type AsyncFnReturn<T extends FnReturningPromise = FnReturningPromise> = [StateFromFnReturningPromise<T>, T];
+
+export default function useAsyncFn<T extends FnReturningPromise>(
+  fn: T,
   deps: DependencyList = [],
-  initialState: AsyncState<Result> = { loading: false }
-): AsyncFn<Result, Args> {
+  initialState: StateFromFnReturningPromise<T> = { loading: false }
+): AsyncFnReturn<T> {
   const lastCallId = useRef(0);
-  const [state, set] = useState<AsyncState<Result>>(initialState);
-
   const isMounted = useMountedState();
+  const [state, set] = useState<StateFromFnReturningPromise<T>>(initialState);
 
-  const callback = useCallback((...args: Args | []) => {
+  const callback = useCallback((...args: Parameters<T>): ReturnType<T> => {
     const callId = ++lastCallId.current;
-    set({ loading: true });
+    set(prevState => ({ ...prevState, loading: true }));
 
     return fn(...args).then(
       value => {
@@ -49,8 +53,8 @@ export default function useAsyncFn<Result = any, Args extends any[] = any[]>(
 
         return error;
       }
-    );
+    ) as ReturnType<T>;
   }, deps);
 
-  return [state, callback];
+  return [state, (callback as unknown) as T];
 }

src/useCopyToClipboard.ts

@@ -19,31 +19,46 @@ const useCopyToClipboard = (): [CopyToClipboardState, (value: string) => void] =
   });
 
   const copyToClipboard = useCallback(value => {
+    if (!isMounted()) {
+      return;
+    }
+    let noUserInteraction;
+    let normalizedValue;
     try {
-      if (process.env.NODE_ENV === 'development') {
-        if (typeof value !== 'string') {
-          console.error(`Cannot copy typeof ${typeof value} to clipboard, must be a string`);
-        }
+      // only strings and numbers casted to strings can be copied to clipboard
+      if (typeof value !== 'string' && typeof value !== 'number') {
+        const error = new Error(`Cannot copy typeof ${typeof value} to clipboard, must be a string`);
+        if (process.env.NODE_ENV === 'development') console.error(error);
+        setState({
+          value,
+          error,
+          noUserInteraction: true,
+        });
+        return;
       }
-
-      const noUserInteraction = writeText(value);
-
-      if (!isMounted()) {
+      // empty strings are also considered invalid
+      else if (value === '') {
+        const error = new Error(`Cannot copy empty string to clipboard.`);
+        if (process.env.NODE_ENV === 'development') console.error(error);
+        setState({
+          value,
+          error,
+          noUserInteraction: true,
+        });
         return;
       }
+      normalizedValue = value.toString();
+      noUserInteraction = writeText(normalizedValue);
       setState({
-        value,
+        value: normalizedValue,
         error: undefined,
         noUserInteraction,
       });
     } catch (error) {
-      if (!isMounted()) {
-        return;
-      }
       setState({
-        value: undefined,
+        value: normalizedValue,
         error,
-        noUserInteraction: true,
+        noUserInteraction,
       });
     }
   }, []);

src/useCustomCompareEffect.ts

@@ -2,9 +2,13 @@ import { DependencyList, EffectCallback, useEffect, useRef } from 'react';
 
 const isPrimitive = (val: any) => val !== Object(val);
 
-type DepsEqualFnType = (prevDeps: DependencyList, nextDeps: DependencyList) => boolean;
+type DepsEqualFnType<TDeps extends DependencyList> = (prevDeps: TDeps, nextDeps: TDeps) => boolean;
 
-const useCustomCompareEffect = (effect: EffectCallback, deps: DependencyList, depsEqual: DepsEqualFnType) => {
+const useCustomCompareEffect = <TDeps extends DependencyList>(
+  effect: EffectCallback,
+  deps: TDeps,
+  depsEqual: DepsEqualFnType<TDeps>
+) => {
   if (process.env.NODE_ENV !== 'production') {
     if (!(deps instanceof Array) || !deps.length) {
       console.warn('`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
@@ -21,7 +25,7 @@ const useCustomCompareEffect = (effect: EffectCallback, deps: DependencyList, de
     }
   }
 
-  const ref = useRef<DependencyList | undefined>(undefined);
+  const ref = useRef<TDeps | undefined>(undefined);
 
   if (!ref.current || !depsEqual(deps, ref.current)) {
     ref.current = deps;