archive-gh-me/react-use
1
0
Fork 0
mirror of https://github.com/streamich/react-use.git synced 2026-01-25 14:17:16 +00:00
Code Issues Projects Releases Wiki Activity

Update the corresponding hooks usage docs

Browse Source
This commit is contained in:
realdennis 2019-08-30 21:51:38 +08:00
parent 4dde514de8
commit c92b4d7400
2 changed files with 17 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
docs/useAudio.md
View File

@ -2,16 +2,15 @@
Creates `<audio>` element, tracks its state and exposes playback controls.
## Usage
```jsx
import {useAudio} from 'react-use';
import { useAudio } from 'react-use';
const Demo = () => {
const [audio, state, controls, ref] = useAudio({
src: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
autoPlay: true,
autoPlay: true
});
return (
@ -20,14 +19,14 @@ const Demo = () => {
<pre>{JSON.stringify(state, null, 2)}</pre>
<button onClick={controls.pause}>Pause</button>
<button onClick={controls.play}>Play</button>
<br/>
<br />
<button onClick={controls.mute}>Mute</button>
<button onClick={controls.unmute}>Un-mute</button>
<br/>
<button onClick={() => controls.volume(.1)}>Volume: 10%</button>
<button onClick={() => controls.volume(.5)}>Volume: 50%</button>
<br />
<button onClick={() => controls.volume(0.1)}>Volume: 10%</button>
<button onClick={() => controls.volume(0.5)}>Volume: 50%</button>
<button onClick={() => controls.volume(1)}>Volume: 100%</button>
<br/>
<br />
<button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>
<button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>
</div>
@ -35,12 +34,11 @@ const Demo = () => {
};
```
## Reference
```jsx
const [audio, state, controls, ref] = useAudio(props);
const [audio, state, controls] = useAudio(<audio {...props}/>);
const [audio, state, controls] = useAudio(<audio {...props} />);
```
`audio` is React's `<audio>` element that you have to insert somewhere in your
@ -62,7 +60,7 @@ render tree, for example:
],
"time": 5.244996,
"duration": 425.952625,
"isPlaying": false,
"paused": true,
"muted": false,
"volume": 1
}

18
docs/useVideo.md
View File

@ -2,11 +2,10 @@
Creates `<video>` element, tracks its state and exposes playback controls.
## Usage
```jsx
import {useVideo} from 'react-use';
import { useVideo } from 'react-use';
const Demo = () => {
const [video, state, controls, ref] = useVideo(
@ -19,14 +18,14 @@ const Demo = () => {
<pre>{JSON.stringify(state, null, 2)}</pre>
<button onClick={controls.pause}>Pause</button>
<button onClick={controls.play}>Play</button>
<br/>
<br />
<button onClick={controls.mute}>Mute</button>
<button onClick={controls.unmute}>Un-mute</button>
<br/>
<button onClick={() => controls.volume(.1)}>Volume: 10%</button>
<button onClick={() => controls.volume(.5)}>Volume: 50%</button>
<br />
<button onClick={() => controls.volume(0.1)}>Volume: 10%</button>
<button onClick={() => controls.volume(0.5)}>Volume: 50%</button>
<button onClick={() => controls.volume(1)}>Volume: 100%</button>
<br/>
<br />
<button onClick={() => controls.seek(state.time - 5)}>-5 sec</button>
<button onClick={() => controls.seek(state.time + 5)}>+5 sec</button>
</div>
@ -34,12 +33,11 @@ const Demo = () => {
};
```
## Reference
```jsx
const [video, state, controls, ref] = useVideo(props);
const [video, state, controls, ref] = useVideo(<video {...props}/>);
const [video, state, controls, ref] = useVideo(<video {...props} />);
```
`video` is React's `<video>` element that you have to insert somewhere in your
@ -61,7 +59,7 @@ render tree, for example:
],
"time": 5.244996,
"duration": 425.952625,
"isPlaying": false,
"paused": true,
"muted": false,
"volume": 1
}