Overview

There are different ways to use the React Video SDK to build out UI. It comes with powerful built-in components ready for use. In addition, it allows for styling and custom theming options with custom CSS.

For custom use cases it is also possible to create your own components to fully tailor the SDK to your needs.

This page guides you through all the options you have with increasing levels of customization.

Using pre-built components

You can create a fully functioning video calling application with just a few lines of code using pre-built components:

import '@stream-io/video-react-sdk/dist/css/styles.css';
import {
  CallControls,
  StreamCall,
  StreamTheme,
  StreamVideo,
  SpeakerLayout,
} from '@stream-io/video-react-sdk';

const MyApp = () => {
  // Assuming you have the 'client' and 'call' instance created
  return (
    <StreamVideo client={client}>
      <StreamTheme>
        <StreamCall call={call}>
          <SpeakerLayout />
          <CallControls />
        </StreamCall>
      </StreamTheme>
    </StreamVideo>
  );
};

Theming with CSS

If you only want to customize the styling of the available components, there is a wide range of CSS variables that you can override. With that, you can achieve a significant amount of theming in your video product.

To change them you can simply override them with your custom values.

Here is an example:

.str-video {
  // The primary color that is used
  --str-video__primary-color: green;
}

Check out the theming guide for more details.

Custom components

You can create custom components from scratch or you can use built-in components as building blocks.

The Call & Participant State guide describes how you can access state variables in your custom components.

Here is an example of how you can use the useParticipants() hook to get all call participants and render them in your application.

import { useCallStateHooks } from '@stream-io/video-react-sdk';

const MyParticipantList = () => {
  const { useParticipants } = useCallStateHooks();
  const participants = useParticipants();
  return (
    <>
      <h2>Participants</h2>
      {participants.map((participant) => (
        <div key={participant.sessionId}>
          <img
            src={participant.image}
            alt={`Profile picture of ${participant.name}.`}
          />
          <span>{participant.name}</span>
        </div>
      ))}
    </>
  );
};

Combining all of the possibilities that you have gives you the freedom to use the performant pre-built components when they suit your needs. At the same time if you have more customized use cases you can fully tailor the appearance to your needs.