release v6

.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';

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.
   - [`useFavicon`](./docs/useFavicon.md) &mdash; sets favicon of the page.
   - [`useLocalStorage`](./docs/useLocalStorage.md) &mdash; manages a value in `localStorage`.
   - [`useLockBodyScroll`](./docs/useLockBodyScroll.md) &mdash; lock scrolling of the body element.
@@ -91,7 +91,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

@@ -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} />;
+  })

src/index.ts

@@ -4,7 +4,6 @@ import useAsyncRetry from './useAsyncRetry';
 import useAudio from './useAudio';
 import useBattery from './useBattery';
 import useBoolean from './useBoolean';
-import useCallbag from './useCallbag';
 import useCounter from './useCounter';
 import useCss from './useCss';
 import useDebounce from './useDebounce';
@@ -29,11 +28,12 @@ import useMediaDevices from './useMediaDevices';
 import useMotion from './useMotion';
 import useMount from './useMount';
 import useMouse from './useMouse';
+import useMouseHovered from './useMouseHovered';
 import useNetwork from './useNetwork';
 import useNumber from './useNumber';
 import useObservable from './useObservable';
 import useOrientation from './useOrientation';
-import useOutsideClick from './useOutsideClick';
+import useClickAway from './useClickAway';
 import usePromise from './usePromise';
 import useRaf from './useRaf';
 import useRefMounted from './useRefMounted';
@@ -62,7 +62,7 @@ export {
   useAudio,
   useBattery,
   useBoolean,
-  useCallbag,
+  useClickAway,
   useCounter,
   useCss,
   useDebounce,
@@ -87,11 +87,11 @@ export {
   useMotion,
   useMount,
   useMouse,
+  useMouseHovered,
   useNetwork,
   useNumber,
   useObservable,
   useOrientation,
-  useOutsideClick,
   usePromise,
   useRaf,
   useRefMounted,