From 9199f829e35385a765cd9fc6b03815dfce8221fd Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 29 Oct 2018 16:06:14 +1100 Subject: [PATCH] docs: add useHover demo link --- README.md | 104 ++++++++++++++++++++++++++---------------------------- 1 file changed, 50 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index 81d89e12..d7938ce6 100644 --- a/README.md +++ b/README.md @@ -27,70 +27,66 @@
- ## Reference -- [__Sensors__](./docs/Sensors.md) - - [`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. - - [`useHover`](./docs/useHover.md) — tracks mouse hover state of some element. - - [`useIdle`](./docs/useIdle.md) — tracks whether user is being inactive. - - [`useLocation`](./docs/useLocation.md) — tracks page navigation bar location state. - - [`useMedia`](./docs/useMedia.md) — tracks state of a CSS media query. - - [`useMediaDevices`](./docs/useMediaDevices.md) — tracks state of connected hardware devices. - - [`useMotion`](./docs/useMotion.md) — tracks state of device's motion sensor. - - [`useNetwork`](./docs/useNetwork.md) — tracks state of user's internet connection. - - [`useOrientation`](./docs/useOrientation.md) — tracks state of device's screen orientation. - - [`useSize`](./docs/useSize.md) — tracks some HTML element's dimensions. - - [`useWindowSize`](./docs/useWindowSize.md) — tracks `Window` dimensions. [![][img-demo]](https://codesandbox.io/s/m7ln22668) -
-
-- [__UI__](./docs/UI.md) - - [`useAudio`](./docs/useAudio.md) — plays audio and exposes its controls. [![][img-demo]](https://codesandbox.io/s/5v7q47knwl) - - [`useSpeech`](./docs/useSpeech.md) — synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m) -
-
-- [__Animations__](./docs/Animations.md) - - [`useRaf`](./docs/useRaf.md) — re-renders component on each `reaquestAnimationFrame`. - - [`useSpring`](./docs/useSpring.md) — interpolates number over time according to spring dynamics. - - [`useTimeout`](./docs/useTimeout.md) — returns true after a timeout. - - [`useTween`](./docs/useTween.md) — re-renders component, while tweening a number from 0 to 1. [![][img-demo]](https://codesandbox.io/s/52990wwzyl) -
-
-- [__Side-effects__](./docs/Side-effects.md) - - [`useAsync`](./docs/useAsync.md) — resolves an `async` function. - - [`useCss`](./docs/useCss.md) — dynamically adjusts CSS. - - [`useFavicon`](./docs/useFavicon.md) — sets favicon of the page. - - [`useTitle`](./docs/useTitle.md) — sets title of the page. -
-
-- [__Lifecycles__](./docs/Lifecycles.md) - - [`useLifecycles`](./docs/useLifecycles.md) — calls `mount` and `unmount` callbacks. - - [`useLogger`](./docs/useLogger.md) — logs in console as component goes though life-cycles. - - [`useMount`](./docs/useMount.md) — calls `mount` callbacks. - - [`useUnmount`](./docs/useUnmount.md) — calls `unmount` callbacks. -
-
-- [__State__](./docs/State.md) - - [`useObservable`](./docs/useObservable.md) — tracks latest value of an `Observable`. - - [`useSetState`](./docs/useSetState.md) — creates `setState` method which works like `this.setState`. [![][img-demo]](https://codesandbox.io/s/n75zqn1xp0) - - [`useToggle`](./docs/useToggle.md) — tracks state of a boolean. - - [`useCounter`](./docs/useCounter.md) — tracks state of a number. - - [`useList`](./docs/useList.md) — tracks state of an array. - - [`useMap`](./docs/useMap.md) — tracks state of an object. -
-
- +- [**Sensors**](./docs/Sensors.md) + - [`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. + - [`useHover`](./docs/useHover.md) — tracks mouse hover state of some element. [![][img-demo]](https://codesandbox.io/s/zpn583rvx) + - [`useIdle`](./docs/useIdle.md) — tracks whether user is being inactive. + - [`useLocation`](./docs/useLocation.md) — tracks page navigation bar location state. + - [`useMedia`](./docs/useMedia.md) — tracks state of a CSS media query. + - [`useMediaDevices`](./docs/useMediaDevices.md) — tracks state of connected hardware devices. + - [`useMotion`](./docs/useMotion.md) — tracks state of device's motion sensor. + - [`useNetwork`](./docs/useNetwork.md) — tracks state of user's internet connection. + - [`useOrientation`](./docs/useOrientation.md) — tracks state of device's screen orientation. + - [`useSize`](./docs/useSize.md) — tracks some HTML element's dimensions. + - [`useWindowSize`](./docs/useWindowSize.md) — tracks `Window` dimensions. [![][img-demo]](https://codesandbox.io/s/m7ln22668) +
+
+- [**UI**](./docs/UI.md) + - [`useAudio`](./docs/useAudio.md) — plays audio and exposes its controls. [![][img-demo]](https://codesandbox.io/s/5v7q47knwl) + - [`useSpeech`](./docs/useSpeech.md) — synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m) +
+
+- [**Animations**](./docs/Animations.md) + - [`useRaf`](./docs/useRaf.md) — re-renders component on each `reaquestAnimationFrame`. + - [`useSpring`](./docs/useSpring.md) — interpolates number over time according to spring dynamics. + - [`useTimeout`](./docs/useTimeout.md) — returns true after a timeout. + - [`useTween`](./docs/useTween.md) — re-renders component, while tweening a number from 0 to 1. [![][img-demo]](https://codesandbox.io/s/52990wwzyl) +
+
+- [**Side-effects**](./docs/Side-effects.md) + - [`useAsync`](./docs/useAsync.md) — resolves an `async` function. + - [`useCss`](./docs/useCss.md) — dynamically adjusts CSS. + - [`useFavicon`](./docs/useFavicon.md) — sets favicon of the page. + - [`useTitle`](./docs/useTitle.md) — sets title of the page. +
+
+- [**Lifecycles**](./docs/Lifecycles.md) + - [`useLifecycles`](./docs/useLifecycles.md) — calls `mount` and `unmount` callbacks. + - [`useLogger`](./docs/useLogger.md) — logs in console as component goes though life-cycles. + - [`useMount`](./docs/useMount.md) — calls `mount` callbacks. + - [`useUnmount`](./docs/useUnmount.md) — calls `unmount` callbacks. +
+
+- [**State**](./docs/State.md) + - [`useObservable`](./docs/useObservable.md) — tracks latest value of an `Observable`. + - [`useSetState`](./docs/useSetState.md) — creates `setState` method which works like `this.setState`. [![][img-demo]](https://codesandbox.io/s/n75zqn1xp0) + - [`useToggle`](./docs/useToggle.md) — tracks state of a boolean. + - [`useCounter`](./docs/useCounter.md) — tracks state of a number. + - [`useList`](./docs/useList.md) — tracks state of an array. + - [`useMap`](./docs/useMap.md) — tracks state of an object. +
+
## Usage - You need to have React `16.7.0-alpha.0` or later installed to use Hooks API. - You can import each hook individually `import useToggle from 'react-use/lib/useToggle'`. - ## License [Unlicense](./LICENSE) — public domain. - [img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg