Merge pull request #13 from streamich/demos

docs: ✏️ add useBattery demo

README.md

@@ -31,7 +31,7 @@
 ## Reference
 
 - [__Sensors__](./docs/Sensors.md)
-   - [`useBattery`](./docs/useBattery.md) — tracks device battery state.
+   - [`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.
@@ -42,19 +42,19 @@
    - [`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.
+   - [`useWindowSize`](./docs/useWindowSize.md) — tracks `Window` dimensions. [![][img-demo]](https://codesandbox.io/s/m7ln22668)
      <br/>
      <br/>
 - [__UI__](./docs/UI.md)
-   - [`useAudio`](./docs/useAudio.md) &mdash; plays audio and exposes its controls.
-   - [`useSpeech`](./docs/useSpeech.md) &mdash; synthesizes speech from a text string.
+   - [`useAudio`](./docs/useAudio.md) &mdash; plays audio and exposes its controls. [![][img-demo]](https://codesandbox.io/s/5v7q47knwl)
+   - [`useSpeech`](./docs/useSpeech.md) &mdash; synthesizes speech from a text string. [![][img-demo]](https://codesandbox.io/s/n090mqz69m)
      <br/>
      <br/>
 - [__Animations__](./docs/Animations.md)
    - [`useRaf`](./docs/useRaf.md) &mdash; re-renders component on each `reaquestAnimationFrame`.
    - [`useSpring`](./docs/useSpring.md) &mdash; interpolates number over time according to spring dynamics.
    - [`useTimeout`](./docs/useTimeout.md) &mdash; returns true after a timeout.
-   - [`useTween`](./docs/useTween.md) &mdash; re-renders component, while tweening a number from 0 to 1.
+   - [`useTween`](./docs/useTween.md) &mdash; re-renders component, while tweening a number from 0 to 1. [![][img-demo]](https://codesandbox.io/s/52990wwzyl)
      <br/>
      <br/>
 - [__Side-effects__](./docs/Side-effects.md)
@@ -90,3 +90,6 @@
 ## License
 
 [Unlicense](./LICENSE) &mdash; public domain.
+
+
+[img-demo]: https://img.shields.io/badge/demo-%20%20%20%F0%9F%9A%80-green.svg

docs/useAudio.md

@@ -2,6 +2,8 @@
 
 Creates `<audio>` element, tracks its state and exposes playback conrols.
 
+[![](https://img.shields.io/badge/demo-useAudio-green.svg)](https://codesandbox.io/s/5v7q47knwl)
+
 
 ## Usage
 

docs/useBattery.md

@@ -2,6 +2,8 @@
 
 React sensor hook that tracks batter status.
 
+[![](https://img.shields.io/badge/demo-useBattery-green.svg)](https://codesandbox.io/s/qlvn662zww)
+
 
 ## Usage
 

docs/useSpeech.md

@@ -2,6 +2,8 @@
 
 React UI hook that synthesizes human voice that speaks a given string.
 
+[![](https://img.shields.io/badge/demo-useSpeech-green.svg)](https://codesandbox.io/s/n090mqz69m)
+
 
 ## Usage
 

docs/useTween.md

@@ -2,6 +2,8 @@
 
 React animation hook that tweens a number between 0 and 1.
 
+[![](https://img.shields.io/badge/demo-useTween-green.svg)](https://codesandbox.io/s/52990wwzyl)
+
 
 ## Usage
 

docs/useWindowSize.md

@@ -2,6 +2,8 @@
 
 React sensor hook that tracks dimensions of the browser window.
 
+[![](https://img.shields.io/badge/demo-useWindowSize-green.svg)](https://codesandbox.io/s/m7ln22668)
+
 
 ## Usage