@100mslive/react-sdk

100ms React SDK

This package is a react wrapper over the core SDK(@100mslive/hms-video-store). An easy way to use the store, actions and notifications are provided via React hooks. Some other hooks are also provided for ease of use which wrap over the primitive ones. If someone is using class based react components, they'll be better off with using the core sdk directly.

Installation

// npm
npm install @100mslive/react-sdk@latest --save

// yarn
yarn add @100mslive/react-sdk@latest

Usage

Add HMSRoomProvider from @100mslive/react-sdk at the top level of your component tree where you want to use the hooks. Wihout this the hooks will throw an error.

<HMSRoomProvider>
   <YourComponent></YourComponent>
</HMSRoomProvider>

By default, when using HMSRoomProvider room leave will be called when you are leaving/closing the tab. To disable this behaviour, you can pass leaveOnUnload as false

NOTE: The above leave might or might not be successfully sent to server as it depends on the browser implementation. This works on chromium based browsers.

Primitive Hooks

These are hooks wrapper over the sdk things.

• useHMSStore - to get any state from store
• useHMSActions - hmsActions to perform any actions
• useHMSNotifications - to receive any new notifications/error for the room
• useHMSVanillaStore - return the store object directly to be used in non react context
• useHMSStatsStore - to get webrtc related stats

Helpful Hooks

• useVideo - attaching and detaching video based on trackId
• useVideoList - helpful to build a paginated gallery view of video tiles
• useScreenShare - to toggle screenshare
• useCustomEvent - to add custom events
• useDevices - returns a list of all A/V devices
• useParticipants - get count of participants, participants filtered by role or metadata
• usePreviewJoin - implementing preview + join
• useAVToggle - to toggle mute/unmute for audio and video
• useRemoteAVToggle - to toggle remote mute/unmute + audio volume changer on tile level
• useAutoplayError - unblock browser autoplay block
• useAudioLevelStyles - apply css properties on element based on it's audio level

Refer to docs for a more detailed guide.