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 ``, `` or an `` element.
+A `blob` url that can be wired to an ``, `` or an `` element.
-#### clearBlobUrl
+#### clearBlobUrl
A `function` which clears the existing generated blob url (if any)
diff --git a/package.json b/package.json
index 7cd0165..298c3f8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-media-recorder",
- "version": "1.3.0",
+ "version": "1.4.0",
"description": "A React component based on MediaRecorder() API to record audio/video streams",
"main": "index.js",
"scripts": {
diff --git a/src/index.ts b/src/index.ts
index b3d5ca1..92188b6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,6 +1,6 @@
import { ReactElement, useCallback, useEffect, useRef, useState } from "react";
-type ReactMediaRecorderRenderProps = {
+export type ReactMediaRecorderRenderProps = {
error: string;
muteAudio: () => void;
unMuteAudio: () => void;
@@ -15,8 +15,7 @@ type ReactMediaRecorderRenderProps = {
clearBlobUrl: () => void;
};
-type ReactMediaRecorderProps = {
- render: (props: ReactMediaRecorderRenderProps) => ReactElement;
+export type ReactMediaRecorderHookProps = {
audio?: boolean | MediaTrackConstraints;
video?: boolean | MediaTrackConstraints;
screen?: boolean;
@@ -24,8 +23,11 @@ type ReactMediaRecorderProps = {
blobPropertyBag?: BlobPropertyBag;
mediaRecorderOptions?: MediaRecorderOptions | null;
};
+export type ReactMediaRecorderProps = ReactMediaRecorderHookProps & {
+ render: (props: ReactMediaRecorderRenderProps) => ReactElement;
+};
-type StatusMessages =
+export type StatusMessages =
| "media_aborted"
| "permission_denied"
| "no_specified_media_found"
@@ -40,7 +42,7 @@ type StatusMessages =
| "stopping"
| "stopped";
-enum RecorderErrors {
+export enum RecorderErrors {
AbortError = "media_aborted",
NotAllowedError = "permission_denied",
NotFoundError = "no_specified_media_found",
@@ -51,15 +53,14 @@ enum RecorderErrors {
NO_RECORDER = "recorder_error",
}
-export const ReactMediaRecorder = ({
- render,
+export function useReactMediaRecorder({
audio = true,
video = false,
onStop = () => null,
blobPropertyBag,
screen = false,
mediaRecorderOptions = null,
-}: ReactMediaRecorderProps) => {
+}: ReactMediaRecorderHookProps): ReactMediaRecorderRenderProps {
const mediaRecorder = useRef(null);
const mediaChunks = useRef([]);
const mediaStream = useRef(null);
@@ -226,7 +227,7 @@ export const ReactMediaRecorder = ({
}
};
- return render({
+ return {
error: RecorderErrors[error],
muteAudio: () => muteAudio(true),
unMuteAudio: () => muteAudio(false),
@@ -241,5 +242,8 @@ export const ReactMediaRecorder = ({
? new MediaStream(mediaStream.current.getVideoTracks())
: null,
clearBlobUrl: () => setMediaBlobUrl(null),
- });
-};
+ };
+}
+
+export const ReactMediaRecorder = (props: ReactMediaRecorderProps) =>
+ props.render(useReactMediaRecorder(props));