feat(hook): introduce useAudio hook (#383)

* feat(hook): introduce useAudio hook

* chore: update readme

* chore: rename useSetState to useObjectState

README.md

@@ -117,6 +117,8 @@ $ yarn add beautiful-react-hooks
 * [useConditionalTimeout](docs/useConditionalTimeout.md)
 * [useCookie](docs/useCookie.md)
 * [useMutationObserver](docs/useMutationObserver.md)
+* [useAudio](docs/useAudio.md)
+* [useObjectState](docs/useObjectState.md)
 
 <div>
   <p align="center">

docs/README.es-ES.md

@@ -113,6 +113,8 @@ $ yarn add beautiful-react-hooks
 * [useConditionalTimeout](useConditionalTimeout.md)
 * [useCookie](useCookie.md)
 * [useMutationObserver](useMutationObserver.md)
+* [useAudio](useAudio.md)
+* [useObjectState](useObjectState.md)
 
 <div>
   <p align="center">

docs/README.it-IT.md

@@ -113,6 +113,8 @@ $ yarn add beautiful-react-hooks
 * [useConditionalTimeout](useConditionalTimeout.md)
 * [useCookie](useCookie.md)
 * [useMutationObserver](useMutationObserver.md)
+* [useAudio](useAudio.md)
+* [useObjectState](useObjectState.md)
 
 <div>
   <p align="center">

docs/README.jp-JP.md

@@ -113,6 +113,8 @@ $ yarn add beautiful-react-hooks
 * [useConditionalTimeout](useConditionalTimeout.md)
 * [useCookie](useCookie.md)
 * [useMutationObserver](useMutationObserver.md)
+* [useAudio](useAudio.md)
+* [useObjectState](useObjectState.md)
 
 <div>
   <p align="center">

docs/README.pl-PL.md

@@ -116,6 +116,8 @@ $ yarn add beautiful-react-hooks
 * [useConditionalTimeout](useConditionalTimeout.md)
 * [useCookie](useCookie.md)
 * [useMutationObserver](useMutationObserver.md)
+* [useAudio](useAudio.md)
+* [useObjectState](useObjectState.md)
 
 <div>
   <p align="center">

docs/README.pt-BR.md

@@ -115,6 +115,8 @@ $ yarn add beautiful-react-hooks
 * [useConditionalTimeout](useConditionalTimeout.md)
 * [useCookie](useCookie.md)
 * [useMutationObserver](useMutationObserver.md)
+* [useAudio](useAudio.md)
+* [useObjectState](useObjectState.md)
 
 <div>
   <p align="center">

docs/README.uk-UA.md

@@ -114,6 +114,8 @@ $ yarn add beautiful-react-hooks
 * [useConditionalTimeout](useConditionalTimeout.md)
 * [useCookie](useCookie.md)
 * [useMutationObserver](useMutationObserver.md)
+* [useAudio](useAudio.md)
+* [useObjectState](useObjectState.md)
 
 <div>
   <p align="center">

docs/README.zh-CN.md

@@ -111,6 +111,8 @@ $ yarn add beautiful-react-hooks
 * [useConditionalTimeout](useConditionalTimeout.md)
 * [useCookie](useCookie.md)
 * [useMutationObserver](useMutationObserver.md)
+* [useAudio](useAudio.md)
+* [useObjectState](useObjectState.md)
 
 <div>
   <p align="center">

docs/useAudio.md

@@ -0,0 +1,52 @@
+# useAudio
+
+Creates <audio> element, tracks its state and exposes playback controls.
+
+### Why? 💡
+
+- A quick way to use the `Audio` in your React components.
+
+### Basic Usage:
+
+```jsx harmony
+import { useRef, useState } from 'react';
+import { Button } from 'beautiful-react-ui';
+import useAudio from 'beautiful-react-hooks/useAudio';
+
+const UseAudioComponent = () => {
+  const [state, controls] = useAudio("https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", { autoPlay: true });
+
+  return (
+    <DisplayDemo>
+      {JSON.stringify(state, null, 2)}
+      <br />
+      <Button onClick={controls.play}>
+        Play
+      </Button>
+      <Button onClick={controls.pause}>
+        Pause
+      </Button>
+      <br />
+      <Button onClick={controls.mute}>
+        Mute
+      </Button>
+      <Button onClick={controls.unmute}>
+        Unmute
+      </Button>
+      <br />
+      <Button onClick={() => controls.setVolume(.1)}>Volume: 10%</Button>
+      <Button onClick={() => controls.setVolume(.5)}>Volume: 50%</Button>
+      <Button onClick={() => controls.setVolume(1)}>Volume: 100%</Button>
+      <br />
+      <Button onClick={() => controls.seek(state.currentTime + 10)}>
+        Jump 10 seconds
+      </Button>
+      <Button onClick={() => controls.seek(state.currentTime - 10)}>
+        Jump -10 seconds
+      </Button>
+    </DisplayDemo>
+  );
+};
+
+<UseAudioComponent />
+```

docs/useObjectState.md

@@ -0,0 +1,49 @@
+# useObjectState
+
+React state hook that creates setState method which works similar to how useState works, merges object changes into the current state.
+
+### Why? 💡
+
+- takes care of automatically destruct the previous state and override this with a new one,
+
+### Basic Usage:
+
+```jsx harmony
+import { useState, useRef } from 'react';
+import { Button } from 'beautiful-react-ui';
+import useObjectState from 'beautiful-react-hooks/useObjectState';
+
+const UseObjectStateComponent = () => {
+  const [state, setState] = useObjectState({ count: 0, title: 'Test title' })
+
+  const reset = () => setState({ count: 0 })
+
+  const increment = () => setState({ count: state.count + 1 })
+
+  const decrement = () => setState({ count: state.count - 1 })
+
+  return (
+    <DisplayDemo>
+      <p>State:</p>
+      <p>{JSON.stringify(state, null, 2)}</p>
+      <Button onClick={increment}>
+        Increment counter
+      </Button>
+      <Button onClick={decrement}>
+        Decrement counter
+      </Button>
+      <Button onClick={reset}>
+        Reset counter
+      </Button>
+    </DisplayDemo>
+  );
+};
+
+<UseObjectStateComponent />
+```
+
+### Mastering the hook
+
+#### ✅ When to use
+
+- When in need of manage the state which is an object,