Merge branch 'master' into useThrottle

.storybook/addons.js

@@ -1,4 +1,4 @@
+import '@storybook/addon-knobs/register';
 import '@storybook/addon-options/register';
 import '@storybook/addon-actions/register';
-import '@storybook/addon-knobs/register';
 import '@storybook/addon-notes/register';

CHANGELOG.md

@@ -1,3 +1,33 @@
+# [6.0.0](https://github.com/streamich/react-use/compare/v5.16.1...v6.0.0) (2019-03-26)
+
+
+### Bug Fixes
+
+* 🐛 bump nano-css ([f1f36dc](https://github.com/streamich/react-use/commit/f1f36dc)), closes [#90](https://github.com/streamich/react-use/issues/90)
+* 🐛 don't throw only in development ([f5faba5](https://github.com/streamich/react-use/commit/f5faba5))
+
+
+### chore
+
+* 🤖 don't install only large dependencies ([6170067](https://github.com/streamich/react-use/commit/6170067))
+
+
+### Features
+
+* 🎸 add {bound} option to useMouse ([9bb02a1](https://github.com/streamich/react-use/commit/9bb02a1))
+* 🎸 implement useClickAway, remove useOutsideClick ([a03143a](https://github.com/streamich/react-use/commit/a03143a))
+* 🎸 keep global state of all useLockBodyScroll hooks ([5dd10e9](https://github.com/streamich/react-use/commit/5dd10e9))
+* 🎸 move extra mouse functionality into useMouseHovered ([8b0580e](https://github.com/streamich/react-use/commit/8b0580e))
+* more precise size for useMouse ([b887075](https://github.com/streamich/react-use/commit/b887075))
+
+
+### BREAKING CHANGES
+
+* 🧨 error is logged instead of thrown in development environment
+* 🧨 useOutsideClick is now useClickAway
+* 🧨 useCallbag hook is removed, some hooks KeyboardJS and Rebound installed
+separately
+
 ## [5.16.1](https://github.com/streamich/react-use/compare/v5.16.0...v5.16.1) (2019-03-26)
 
 

README.md

@@ -42,7 +42,7 @@
   - [`useMedia`](./docs/useMedia.md) — tracks state of a CSS media query. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemedia--demo)
   - [`useMediaDevices`](./docs/useMediaDevices.md) — tracks state of connected hardware devices.
   - [`useMotion`](./docs/useMotion.md) — tracks state of device's motion sensor.
-  - [`useMouse`](./docs/useMouse.md) — tracks state of mouse position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemouse--docs)
+  - [`useMouse` and `useMouseHovered`](./docs/useMouse.md) — tracks state of mouse position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usemouse--docs)
   - [`useNetwork`](./docs/useNetwork.md) — tracks state of user's internet connection.
   - [`useOrientation`](./docs/useOrientation.md) — tracks state of device's screen orientation.
   - [`useScroll`](./docs/useScroll.md) — tracks some HTML element's scroll position. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/sensors-usescroll--docs)
@@ -53,7 +53,8 @@
     <br/>
 - [**UI**](./docs/UI.md)
   - [`useAudio`](./docs/useAudio.md) &mdash; plays audio and exposes its controls. [![][img-demo]](https://codesandbox.io/s/2o4lo6rqy)
-  - [`useOutsideClick`](./docs/useOutsideClick.md) &mdash; triggers callback when user clicks outside target area.
+  - [`useClickAway`](./docs/useClickAway.md) &mdash; triggers callback when user clicks outside target area.
+  - [`useCss`](./docs/useCss.md) &mdash; dynamically adjusts CSS.
   - [`useSpeech`](./docs/useSpeech.md) &mdash; synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m)
   - [`useVideo`](./docs/useVideo.md) &mdash; plays video, tracks its state, and exposes playback controls. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/ui-usevideo--demo)
   - [`useWait`](./docs/useWait.md) &mdash; complex waiting management for UIs.
@@ -70,7 +71,6 @@
 - [**Side-effects**](./docs/Side-effects.md)
   - [`useAsync`](./docs/useAsync.md) &mdash; resolves an `async` function.
   - [`useAsyncRetry`](./docs/useAsyncRetry.md) &mdash; `useAsync` with `retry()` method.
-  - [`useCss`](./docs/useCss.md) &mdash; dynamically adjusts CSS.
   - [`useDebounce`](./docs/useDebounce.md) &mdash; debounces a function. [![][img-demo]](https://streamich.github.io/react-use/?path=/story/side-effects-usedebounce--demo)
   - [`useFavicon`](./docs/useFavicon.md) &mdash; sets favicon of the page.
   - [`useLocalStorage`](./docs/useLocalStorage.md) &mdash; manages a value in `localStorage`.
@@ -92,7 +92,6 @@
     <br/>
 - [**State**](./docs/State.md)
   - [`createMemo`](./docs/createMemo.md) &mdash; factory of memoized hooks.
-  - [`useCallbag`](./docs/useCallbag.md) &mdash; tracks latest value of a callbag.
   - [`useGetSet`](./docs/useGetSet.md) &mdash; returns state getter `get()` instead of raw state.
   - [`useGetSetState`](./docs/useGetSetState.md) &mdash; as if [`useGetSet`](./docs/useGetSet.md) and [`useSetState`](./docs/useSetState.md) had a baby.
   - [`useObservable`](./docs/useObservable.md) &mdash; tracks latest value of an `Observable`.

docs/useOutsideClick.md → docs/useClickAway.md

@@ -1,4 +1,4 @@
-# `useOutsideClick`
+# `useClickAway`
 
 React UI hook that triggers a callback when user
 clicks outside the target element.
@@ -7,12 +7,12 @@ clicks outside the target element.
 ## Usage
 
 ```jsx
-import {useOutsideClick} from 'react-use';
+import {useClickAway} from 'react-use';
 
 const Demo = () => {
   const ref = useRef(null);
-  useOutsideClick(ref, () => {
-    console.log('OUTSIDE CLICKED');
+  useClickAway(ref, () => {
+    alert('OUTSIDE CLICKED');
   });
 
   return (

docs/useCss.md

@@ -1,6 +1,6 @@
 # `useCss`
 
-React side-effect hook that changes [CSS dynamically][gen-5]. Works like "virtual CSS" —
+React UI hook that changes [CSS dynamically][gen-5]. Works like "virtual CSS" —
 it re-renders only CSS rules that change. It is different from inline styles, because
 you can use media queries and pseudo selectors.
 

docs/useKeyPress.md

@@ -8,6 +8,14 @@ time or requiring them to be held down in a specified order are also available
 via [KeyboardJS key combos](https://github.com/RobertWHurst/KeyboardJS).
 Check its documentation for further details on how to make combo strings.
 
+Requires `keyboardjs`:
+
+```bash
+npm add keyboardjs
+# or
+yarn add keyboardjs
+```
+
 ## Usage
 
 ```jsx

docs/useKeyPressEvent.md

@@ -14,6 +14,14 @@ The first argument is the key(s) to watch. If only a second argument
 if a second and third argument are passed, the second will be used in the keyup
 event and the third in the keydown event. Essentially, keydown takes precedence.
 
+Requires `keyboardjs`:
+
+```bash
+npm add keyboardjs
+# or
+yarn add keyboardjs
+```
+
 ## Usage
 
 ```jsx

docs/useMouse.md

@@ -1,6 +1,11 @@
-# `useMouse`
+# `useMouse` and `useMouseHovered`
+
+React sensor hooks that re-render on mouse position changes. `useMouse` simply tracks
+mouse position; `useMouseHovered` allows you to specify extra options:
+
+- `bound` — to bind mouse coordinates withing the element.
+- `whenHovered` — whether to attach `mousemove` event handler only when user hovers over the element.
 
-React sensor hook that re-renders on mouse position changes.
 
 ## Usage
 
@@ -21,3 +26,11 @@ const Demo = () => {
   );
 };
 ```
+
+
+## Reference
+
+```ts
+useMouse(ref);
+useMouseHovered(ref, {bound: false, whenHovered: false});
+```

docs/useSpring.md

@@ -3,6 +3,13 @@
 React animation hook that updates a single numeric value over time according
 to spring dynamics.
 
+Requires `rebound`:
+
+```bash
+npm add rebound
+# or
+yarn add rebound
+```
 
 ## Usage
 

docs/useWait.md

@@ -2,6 +2,7 @@
 
 `useWait` is a React Hook helps to manage multiple loading states on the page without any conflict. It's based on a very simple idea that manages an `Array` of multiple loading states. The built-in `Wait` component listens its registered loader and immediately become loading state.
 
+
 ## Usage
 
 ```jsx

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-use",
-  "version": "5.16.1",
+  "version": "6.0.0",
   "description": "Collection of React Hooks",
   "main": "lib/index.js",
   "files": [
@@ -30,17 +30,15 @@
   },
   "homepage": "https://github.com/streamich/react-use#readme",
   "dependencies": {
-    "@types/react": "^16.8.2",
-    "keyboardjs": "^2.5.1",
-    "nano-css": "^5.0.0",
+    "nano-css": "^5.1.0",
     "react-wait": "^0.3.0",
-    "rebound": "^0.1.0",
     "throttle-debounce": "^2.0.1",
-    "ts-easing": "^0.2.0",
-    "use-callbag": "^0.2.0",
-    "use-onclickoutside": "^0.3.0"
+    "ts-easing": "^0.2.0"
   },
   "devDependencies": {
+    "@types/react": "^16.8.2",
+    "keyboardjs": "^2.5.1",
+    "rebound": "^0.1.0",
     "@semantic-release/changelog": "3.0.2",
     "@semantic-release/git": "7.0.8",
     "@semantic-release/npm": "5.1.4",
@@ -50,7 +48,6 @@
     "@storybook/addon-options": "5.0.5",
     "@storybook/react": "5.0.5",
     "babel-core": "6.26.3",
-    "callbag-interval": "1.1.0",
     "fork-ts-checker-webpack-plugin": "1.0.0",
     "gh-pages": "2.0.1",
     "markdown-loader": "5.0.0",

src/__stories__/useOutsideClick.story.tsx → src/__stories__/useClickAway.story.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import {storiesOf} from '@storybook/react';
-import {useOutsideClick} from '..';
+import {useClickAway} from '..';
 import {useRef} from 'react';
 import ShowDocs from '../util/ShowDocs';
 
 const Demo = () => {
   const ref = useRef(null);
-  useOutsideClick(ref, () => {
-    console.log('OUTSIDE CLICKED');
+  useClickAway(ref, () => {
+    alert('OUTSIDE CLICKED');
   });
 
   return (
@@ -19,8 +19,8 @@ const Demo = () => {
   );
 };
 
-storiesOf('UI|useOutsideClick', module)
-  .add('Docs', () => <ShowDocs md={require('../../docs/useOutsideClick.md')} />)
+storiesOf('UI|useClickAway', module)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useClickAway.md')} />)
   .add('Demo', () =>
     <Demo/>
   )

src/__stories__/useCss.story.tsx

@@ -19,7 +19,7 @@ const Demo = () => {
   );
 };
 
-storiesOf('Side effects|useCss', module)
+storiesOf('UI|useCss', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useCss.md')} />)
   .add('Demo', () =>
     <Demo/>

src/__stories__/useMouse.story.tsx

@@ -3,30 +3,38 @@ import {storiesOf} from '@storybook/react';
 import {useMouse} from '..';
 import ShowDocs from '../util/ShowDocs';
 
-const Demo = () => {
+const Demo: React.FC<any> = () => {
   const ref = React.useRef(null);
-  const state = useMouse(ref);
+  const state = useMouse(ref)
 
   return (
     <>
       <pre>
         {JSON.stringify(state, null, 2)}
       </pre>
+      <br />
+      <br />
       <div
         ref={ref}
         style={{
+          position: 'relative',
           width: '400px',
           height: '400px',
           backgroundColor: 'whitesmoke',
         }}>
-        Move your mouse over me
+        <span style={{
+          position: 'absolute',
+          left: `${state.elX}px`,
+          top: `${state.elY}px`,
+          pointerEvents: 'none',
+          transform: 'scale(4)'}}>
+          🐭
+        </span>
       </div>
     </>
   );
 };
 
 storiesOf('Sensors|useMouse', module)
   .add('Docs', () => <ShowDocs md={require('../../docs/useMouse.md')} />)
-  .add('Demo', () =>
-    <Demo/>
-  )
+  .add('Demo', () => <Demo />)

src/__stories__/useMouseHovered.story.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {storiesOf} from '@storybook/react';
+import {withKnobs, boolean} from '@storybook/addon-knobs';
+import {useMouseHovered} from '..';
+import ShowDocs from '../util/ShowDocs';
+
+const Demo: React.FC<any> = ({whenHovered, bound}) => {
+  const ref = React.useRef(null);
+  const state = useMouseHovered(ref, {whenHovered, bound})
+
+  return (
+    <>
+      <pre>
+        {JSON.stringify(state, null, 2)}
+      </pre>
+      <br />
+      <br />
+      <div
+        ref={ref}
+        style={{
+          position: 'relative',
+          width: '400px',
+          height: '400px',
+          backgroundColor: 'whitesmoke',
+        }}>
+        <span style={{
+          position: 'absolute',
+          left: `${state.elX}px`,
+          top: `${state.elY}px`,
+          pointerEvents: 'none',
+          transform: 'scale(4)'}}>
+          🐭
+        </span>
+      </div>
+    </>
+  );
+};
+
+storiesOf('Sensors|useMouseHovered', module)
+  .addDecorator(withKnobs)
+  .add('Docs', () => <ShowDocs md={require('../../docs/useMouse.md')} />)
+  .add('Demo', () => {
+    const bound = boolean('bound', false);
+    const whenHovered = boolean('whenHovered', false);
+    return <Demo whenHovered={whenHovered} bound={bound} />;
+  })