New Dyte Video SDK 2.0 for React with Seamless Voice & Video Calling

Dyte launches two new React SDKs for a brilliant live video/audio calling experience - Web Core & UI Kit to help you develop React video calling apps faster.

5 months ago   •   3 min read

By Palash Golecha

React has its own unique design patterns, there is a certain style to how developers build on React, from the lifecycle of components to the functional programming paradigms of hooks.

So when it comes to adding live video/audio experiences within an App, a developer should not need to move away from these abstractions. Developing video calling applications shouldn’t be full of glue code mapping a library made with other design patterns to React’s patterns.

That is why we are launching two SDKs targeted specifically for React.

  • React Web Core
  • React UI Kit

Flux-like Design Pattern

Flux-like Design Pattern with Dyte SDK

Flux is an architectural pattern proposed by Facebook for building React apps. The pattern describes a  unidirectional data flow and has the following components

  • Store
  • Dispatcher/Actions
  • Views

To implement this pattern our SDK exposes two hooks

1. useDyteMeeting

const { meeting } = useDyteMeeting();
Create Dyte Meeting using React Hooks code block

All the actions that you need to take in a meeting, would be executed on this object

// To mute
meeting.self.disableAudio();
// To unmute
meeting.self.enableAudio();
Enable or Disable audio code block

2. useDyteSelector  

All the meeting state is managed by one central store, to consume the data we provide the following hook

const audioEnabled = useDyteSelector((meeting) => meeting.self.audioEnabled);
Dyte Selector Hook for Audio Enabled code block

If you have ever used redux, this should feel right at home. useDyteSelector will only cause a re-render when the data is updated. For example

meeting.self.enableAudio();
// the below hook will not cause the component to re-render
const videoEnabled = useDyteSelector((meeting) => meeting.self.videoEnabled);
Dyte Selector Hook for Audio Enabled code block
React Hooks in Dyte SDK

You can also take action on the changes in these data

const { meeting } = useDyteMeeting();
const roomJoined = useDyteSelector((m) => m.self.roomJoined);
useEffect(() => {
	if(roomJoined) {
		meeting.chat.sendTextMessage(`Hello`);
	}
},[roomJoined]);

You can also listen to events the regular way using event listeners

useEffect(() => {
    const onJoin = (p) => {
        console.log(`${p.name} joined`);
		});
		meeting.participants.joined.on('participantJoin', onJoin);
    return () => meeting.participants.joined.removeListener(onJoin);
},[]);

For these hooks to work they need a parent Context Provider

function App() {
  const [ client, initClient ] = useDyteClient();

  useEffect(() => {
     initClient({
        roomName,
        authToken
      });
  }, []);

  return (
    <DyteProvider value={client}>
      <YourMeetingComponent />
    </DyteProvider>
  );
}

For more information read our docs https://docs.dyte.io/react-ui-kit/basics/using-hooks.

Now how do you build User Interfaces with this SDK?
Effortlessly

React UI Kit

In case you missed our last blog on the UI Kit, read it here https://dyte.io/blog/custom-ui-kit-sdk/

Atomic Design in Dyte SDK 

Our React UI Kit works seamlessly with the core objects. While our default UI is one line of code

<DyteMeeting meeting={meeting} />
Dyte Meeting Object code block

With just a few more lines of code, you can customise it however you want, for example, if you want your participant tile to have a google meet style pin button on hover, you can make your own tile in 10 lines of code.

function ParticipantTile({ children, participant, size, ...rest }: any) {
    return (
        <DyteParticipantTile participant={participant} size={size} {...rest}>
            <DyteAvatar participant={participant} size={size} />
            <DyteNameTag participant={participant} size={size}>
            <DyteAudioVisualizer participant={participant} size={size} />
            </DyteNameTag>
            <button className="pin-btn" onClick={() => participant.pin()}>
                <PinIcon />
            </button>
        </DyteParticipantTile>
    );
}
Participant Tile Code Block

And use it with objects from useDyteSelector

const self = useDyteSelector((meeting) => meeting.self);

return (<ParticipantTile participant={self} id="self-tile" size="sm" />);
Dyte Selector Code Block
Customized Dyte Meeting

Powerful, Customizable and Easy to Use

Read more about our React Core SDK and React UI Kit at docs.dyte.io

If you haven’t heard about Dyte yet, head over to https://dyte.io to learn how we are revolutionizing live video calling through our SDKs and libraries and how you can get started quickly on your 10,000 free minutes which renew every month. If you have any questions, you can reach us at support@dyte.io or ask our developer community.

Spread the word

Keep reading