Merge branch 'master' into feature/correct-spelling

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2
 refs:
   container: &container
     docker:
-      - image: node:12.15.0
+      - image: node:12.16.3
     working_directory: ~/repo
   steps:
     - &Versions

.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"
+]

CHANGELOG.md

@@ -1,3 +1,108 @@
+## [15.0.1](https://github.com/streamich/react-use/compare/v15.0.0...v15.0.1) (2020-05-16)
+
+
+### Bug Fixes
+
+* **deps:** update dependency tslib to v2 ([6aebf3c](https://github.com/streamich/react-use/commit/6aebf3c25e14d12d8f34e62ecbaecfd3125cf2d9))
+
+# [15.0.0](https://github.com/streamich/react-use/compare/v14.3.0...v15.0.0) (2020-05-16)
+
+
+* v15 release ([0f82ba6](https://github.com/streamich/react-use/commit/0f82ba650ed3e8b05b5458a243e7eb246fd954d2))
+
+
+### Bug Fixes
+
+* 🐛 better serialization handling in useLocalStorage hook ([68fb835](https://github.com/streamich/react-use/commit/68fb835ea64cf5587c99645a09c6de93ab1b71df))
+* 🐛 correctly test if env is browser in useMeasure ([9ae494f](https://github.com/streamich/react-use/commit/9ae494fc1874619aad2f3856df790cbc1a2a8239))
+* 🐛 make useMeasure work on server ([2daf769](https://github.com/streamich/react-use/commit/2daf76990d0e1040f8c0f31e16e7c1eebd94c9bf))
+* 🐛 remove set dependencies in useSet hook ([90ba9d0](https://github.com/streamich/react-use/commit/90ba9d000ff35039028cb66753114a6b0b452491))
+* 🐛 revert useMeasure defaults to zeros ([dc92b64](https://github.com/streamich/react-use/commit/dc92b646d0cd0f12868fde370c83e94ca3c7e297))
+* remove console log 🤓 ([f17c8a0](https://github.com/streamich/react-use/commit/f17c8a0f8e63bfddb8f13a094edbea1e3ee9680b))
+* **useLocalStorage:** using undefined for empty value instead of null ([1620e01](https://github.com/streamich/react-use/commit/1620e019fff94fb4a7a711fd3121ec02c7e99301))
+* use latest set object in useSet "has" method ([41f9452](https://github.com/streamich/react-use/commit/41f9452722d6fb7d2628480d7ce657e4f08e441a))
+
+
+### Features
+
+* 🎸 add useScratch() sensor hook ([58db2f9](https://github.com/streamich/react-use/commit/58db2f989d5d4f75ac5e8ef54c25a9df8bb173a5))
+* 🎸 catch up with v14 ([be69035](https://github.com/streamich/react-use/commit/be69035caf13f551e7717d3de0ea339c8943a9de))
+* 🎸 improve implementation of useMeasure() hook ([a164843](https://github.com/streamich/react-use/commit/a1648439021a45c781c2074489d7c6aaaa867406))
+* 🎸 improve implementation of useMeasure() hook ([4d88240](https://github.com/streamich/react-use/commit/4d8824064a0afbeba5a15597b007f8463fdbe027))
+* 🎸 mock useMeasure() hook on server and w/o ResizeObserver ([866f3d7](https://github.com/streamich/react-use/commit/866f3d740b08d4772dfbad9c48b3b0b8bac69a28))
+* 🎸 mock useMeasure() hook on server and w/o ResizeObserver ([2bbc73a](https://github.com/streamich/react-use/commit/2bbc73a5f08e9a21bb3054527fc8ff9fd51cfd47))
+* 🎸 remove resize-observer-polyfill from useMeasure ([2a13fba](https://github.com/streamich/react-use/commit/2a13fbae45af3a26c984de03130139181c0c3839))
+* 🎸 remove resize-observer-polyfill from useMeasure ([bf11131](https://github.com/streamich/react-use/commit/bf11131052c4a4ab2b9306486f0b171ac15057b0))
+* Dependencies inference for useCustomCompareEffect ([477c164](https://github.com/streamich/react-use/commit/477c1644a7225513c53294337be3c5b50126712f))
+* improve useAsyncFn and useAsync typings ([85967e2](https://github.com/streamich/react-use/commit/85967e294ce268bd1edc57968f2c3f85a3ee6cb7))
+* keep previous state in useAsyncFn ([54ac91b](https://github.com/streamich/react-use/commit/54ac91b28dca0f5c276b092d563b9c821cbab081))
+* use useReducer in useUpdate hook, instead of useState + useCallback ([6575b14](https://github.com/streamich/react-use/commit/6575b14985ede9b8f45fdad068ee9238d6f7ab80))
+* **useLocalStorage:** add remove feature. ([#229](https://github.com/streamich/react-use/issues/229)) ([587de16](https://github.com/streamich/react-use/commit/587de16ef5c85497d01e63247a578116d0605ff9))
+
+
+### BREAKING CHANGES
+
+* implementation of useMeasure and useLocalStorage changed
+* resize-observer-polyfill package is not used with useMeasure() hook
+anymore.
+* useMeasure() now defaults all values to -1, if they were not set and
+internal implementation heavily refactored.
+* useAsyncFn now keeps hold of old result/error when called multiple times
+* resize-observer-polyfill package is not used with useMeasure() hook
+anymore.
+* useMeasure() now defaults all values to -1, if they were not set and
+internal implementation heavily refactored.
+
+# [14.3.0](https://github.com/streamich/react-use/compare/v14.2.0...v14.3.0) (2020-05-16)
+
+
+### Features
+
+* 🎸 add useScratch hook ([2a2a298](https://github.com/streamich/react-use/commit/2a2a298b73f7beb9a2a61c309e649be3d2527473))
+
+# [14.2.0](https://github.com/streamich/react-use/compare/v14.1.1...v14.2.0) (2020-04-24)
+
+
+### Features
+
+* 🎸 onScrubStop provide value where scrub stopped ([138b43c](https://github.com/streamich/react-use/commit/138b43cd1ac9ea7c76a1a42fca48ebdcb94e1006))
+
+## [14.1.1](https://github.com/streamich/react-use/compare/v14.1.0...v14.1.1) (2020-04-11)
+
+
+### Bug Fixes
+
+* **deps:** update dependency @types/js-cookie to v2.2.6 ([f9f4fae](https://github.com/streamich/react-use/commit/f9f4fae6a9a136fdd6763dd2b2214c1746fb0595))
+
+# [14.1.0](https://github.com/streamich/react-use/compare/v14.0.0...v14.1.0) (2020-04-08)
+
+
+### Features
+
+* add useHash hook ([44a6cde](https://github.com/streamich/react-use/commit/44a6cde00e1c74831d7c38b8ae4946f6f2171cf5))
+
+# [14.0.0](https://github.com/streamich/react-use/compare/v13.27.1...v14.0.0) (2020-04-04)
+
+
+### Features
+
+* **useRafLoop:** implement [#1090](https://github.com/streamich/react-use/issues/1090) ([1ef1272](https://github.com/streamich/react-use/commit/1ef1272d6dbe8fbcc2d08223cd80ef32ce28a9c9))
+* **useRafLoop:** reworked the hook, now it do not re-render parent component. ([baa2f75](https://github.com/streamich/react-use/commit/baa2f7511e18fc9fec29376afa27af73de633d8f))
+
+
+### BREAKING CHANGES
+
+* **useRafLoop:** changed return array, now it returns only functions in next order: [stop, start, isActive].
+
+Parent component is not re-rendered on loop start/stop.
+
+## [13.27.1](https://github.com/streamich/react-use/compare/v13.27.0...v13.27.1) (2020-03-25)
+
+
+### Bug Fixes
+
+* **deps:** update dependency @xobotyi/scrollbar-width to v1.9.5 ([9751390](https://github.com/streamich/react-use/commit/97513900de7b60d8da62db35125e2f81458a4f25))
+
 # [13.27.0](https://github.com/streamich/react-use/compare/v13.26.5...v13.27.0) (2020-03-03)
 
 

CONTRIBUTING.md

@@ -31,9 +31,9 @@ This library is a collection of React hooks so a proposal for a new hook will ne
 
 ### Creating a new hook
 
-1. Create `src/useYourHookName.ts` and `src/__stories__/useYourHookName.story.tsx`, run `yarn start` to start the storybook development server and start coding your hook
-1. Create `src/__tests__/useYourHookName.test.ts`, run `yarn test:watch` to start the test runner in watch mode and start writing tests for your hook
-1. Create `src/docs/useYourHookName.md` and create documentation for your hook
+1. Create `src/useYourHookName.ts` and `stories/useYourHookName.story.tsx`, run `yarn start` to start the storybook development server and start coding your hook
+1. Create `tests/useYourHookName.test.ts`, run `yarn test:watch` to start the test runner in watch mode and start writing tests for your hook
+1. Create `docs/useYourHookName.md` and create documentation for your hook
 1. Export your hook from `src/index.ts` and add your hook to `README.md`
 
 You can also write your tests first if you prefer [test-driven development](https://en.wikipedia.org/wiki/Test-driven_development).

README.md

@@ -47,6 +47,7 @@
   - [`useBattery`](./docs/useBattery.md) — tracks device battery state. [![][img-demo]](https://codesandbox.io/s/qlvn662zww)
   - [`useGeolocation`](./docs/useGeolocation.md) — tracks geo location state of user's device. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usegeolocation--demo)
   - [`useHover` and `useHoverDirty`](./docs/useHover.md) — tracks mouse hover state of some element. [![][img-demo]](https://codesandbox.io/s/zpn583rvx)
+  - [`useHash`](./docs/useHash.md) — tracks location hash value. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usehash--demo)
   - [`useIdle`](./docs/useIdle.md) — tracks whether user is being inactive.
   - [`useIntersection`](./docs/useIntersection.md) — tracks an HTML element's intersection. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-useintersection--demo)
   - [`useKey`](./docs/useKey.md), [`useKeyPress`](./docs/useKeyPress.md), [`useKeyboardJs`](./docs/useKeyboardJs.md), and [`useKeyPressEvent`](./docs/useKeyPressEvent.md) — track keys. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usekeypressevent--demo)
@@ -59,13 +60,13 @@
   - [`useNetwork`](./docs/useNetwork.md) — tracks state of user's internet connection.
   - [`useOrientation`](./docs/useOrientation.md) — tracks state of device's screen orientation.
   - [`usePageLeave`](./docs/usePageLeave.md) — triggers when mouse leaves page boundaries.
+  - [`useScratch`](./docs/useScratch.md) — tracks mouse click-and-scrub state.
   - [`useScroll`](./docs/useScroll.md) — tracks an HTML element's scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescroll--docs)
   - [`useScrolling`](./docs/useScrolling.md) — tracks whether HTML element is scrolling.
-  - [`useSize`](./docs/useSize.md) — tracks an HTML element's size.
   - [`useStartTyping`](./docs/useStartTyping.md) — detects when user starts typing.
   - [`useWindowScroll`](./docs/useWindowScroll.md) — tracks `Window` scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usewindowscroll--docs)
   - [`useWindowSize`](./docs/useWindowSize.md) — tracks `Window` dimensions. [![][img-demo]](https://codesandbox.io/s/m7ln22668)
-  - [`useMeasure`](./docs/useMeasure.md) — tracks an HTML element's dimensions using the Resize Observer API.[![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemeasure--demo)
+  - [`useMeasure`](./docs/useMeasure.md) and [`useSize`](./docs/useSize.md) — tracks an HTML element's dimensions. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemeasure--demo)
   - [`createBreakpoint`](./docs/createBreakpoint.md) — tracks `innerWidth`
   - [`useScrollbarWidth`](./docs/useScrollbarWidth.md) — detects browser's native scrollbars width. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescrollbarwidth--demo)
     <br/>

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/useHash.md

@@ -0,0 +1,39 @@
+# `useHash`
+
+React sensor hook that tracks browser's location hash.
+
+## Usage
+
+```jsx
+import {useHash} from 'react-use';
+
+const Demo = () => {
+  const [hash, setHash] = useHash();
+
+  useMount(() => {
+    setHash('#/path/to/page?userId=123');
+  });
+
+  return (
+    <div>
+      <div>window.location.href:</div>
+      <div>
+        <pre>{window.location.href}</pre>
+      </div>
+      <div>Edit hash: </div>
+      <div>
+        <input style={{ width: '100%' }} value={hash} onChange={e => setHash(e.target.value)} />
+      </div>
+    </div>
+  );
+};
+```
+
+## API
+
+`const [hash, setHash] = useHash()`
+
+Get latest url hash with `hash` and set url hash with `setHash`.
+
+- `hash: string`: get current url hash. listen to `hashchange` event.
+- `setHash: (newHash: string) => void`: change url hash. Invoke this method will trigger `hashchange` event.

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