diff --git a/README.md b/README.md index f0ba18e..4c0e56b 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # react-media-recorder :o2: :video_camera: :microphone: :computer: -`react-media-recorder` is a fully typed react component with render prop that can be used to: +`react-media-recorder` is a fully typed react component with render prop, or a react hook, that can be used to: - Record audio/video - Record screen @@ -43,6 +43,32 @@ const RecordView = () => ( Since `react-media-recording` uses render prop, you can define what to render in the view. Just don't forget to wire the `startRecording`, `stopRecording` and `mediaBlobUrl` to your component. +## Usage with react hooks + +```javascript +import { useReactMediaRecorder } from "react-media-recorder"; + +const RecordView = () => { + const { + status, + startRecording, + stopRecording, + mediaBlobUrl, + } = useReactMediaRecorder({ video: true }); + + return ( +
+

{status}

+ + +
+ ); +}; +``` + +The hook receives an object as argument with the same ReactMediaRecorder options / props (except the `render` function). + ### Options / Props #### audio @@ -167,9 +193,9 @@ A `function` which unmutes the audio tracks when invoked. #### mediaBlobUrl -A `blob` url that can be wired to an `