BUILT FOR REACT

React Live Streaming UI Kit

Add live video viewing with Tencent RTC’s React Live Streaming UI Kit. Combine viewer components, audience comments, and a live-room list in a viewing experience you can customize.

Start Building Explore Live Demo

DEVELOPER RESOURCES

React Live Streaming UI Kit Docs & Examples

Component Reference

Explore the React Live Streaming UI Kit components.

Explore Components User Authentication

Integration Guides

Install the React Live Streaming UI Kit and connect your users.

React Integration Quick Start

Examples & Source

See the product in action and explore its implementation.

Explore Live Demo View React Source

Watch Product Demos in React

Let viewers follow a creator’s product demonstration and join the conversation. Your application manages the catalog and purchasing experience.

Explore Live Shopping

Live Event Viewing in React

Bring a presentation and its audience into your React app. Connect the viewing screen to the room so people can follow the live event.

Explore Event Streaming

REACT LIVE CAPABILITIES

React Live Video Viewing Features

Watch live

Live video components
Room entry and exit

Join the conversation

Audience comments
Viewer list components

Discover more

Live-room list
Your application navigation

Explore React Live Streaming Components

Combine the video view, audience comments, and room discovery in your React component layout.

Live video

Put the live moment first

Embed the live video component in your React layout and connect it to an existing broadcast. This integration supplies the audience viewing experience.

Read the Documentation

import { LiveView } from 'tuikit-atomicx-react';

export function VideoPanel() {
  return <LiveView />;
}

Live comments

Let the audience join in

Place audience comments beside the React live video view. Keep the conversation and video connected to the same live room.

Read the Documentation

import { BarrageList, BarrageInput } from 'tuikit-atomicx-react';

export function Comments() {
  return <><BarrageList /><BarrageInput /></>;
}

Live room list

Help viewers find what is live

Connect room discovery to the viewing page in your app.

Read the Documentation

import { LiveList } from 'tuikit-atomicx-react';

<LiveList
  columnCount={3}
  onLiveRoomClick={openLiveRoom}
/>

CUSTOMIZATION

Customize Your React Live UI Kit

Arrange video, audience interactions, and navigation around the live experience in your React app.

Your visual identity

Adjust the visual presentation using the customization options available on your platform.

Read the Documentation

GET STARTED

Add Live Streaming to Your React App

01
Create your app
Enable Live for your application and test users.
Open Live Console
02
Add the React Live Streaming UI Kit
Follow the platform guide to connect your project.
Follow the Integration Guide
03
Connect your first room
Sign in a viewer and open a room from an existing host.
Set Up Authentication

React Live UI Kit

npm install tuikit-atomicx-react \
  @tencentcloud/uikit-base-component-react

import { useLoginState } from 'tuikit-atomicx-react';

const { login } = useLoginState();
await login({ SDKAppID, userID, userSig });

React Live Streaming UI Kit FAQs

Can I build a React host broadcasting page?

The React Live Streaming UI Kit currently supports audience viewing and live-room lists. React host streaming is marked as coming soon; use the Vue host implementation when you need an existing web broadcasting interface.

Vue Live Streaming UI Kit

How does this UI Kit fit with the SDK?

The UI Kit provides interface components on top of the underlying service. Choose the SDK when you need more control over your own application UI.

Web Live Streaming SDK

How do I connect a React live viewer to a broadcast?

Enable the Live service, authenticate the viewer, and join the room created by the host. Use separate accounts to test the React audience screen and follow the platform guide for configuration.

React Audience Integration Guide

How do I authenticate users of the React Live Streaming UI Kit?

Create a UserSig on your server and pass it to the client after your own sign-in flow. Keep the application secret on your server.

Read the Authentication Guide

Is the React Live Streaming UI Kit free to use?

The interface and the hosted Live service have different roles. Activate the service for your application and review the current plan, feature availability, and usage charges.

View Live Pricing

How do I integrate React Live Streaming UI Kit with React?

Initialize the documented provider and compose connected components. Match subscriptions and cleanup to React lifecycle, then test navigation and repeated mounting in your actual application.

Read the platform guide

How do I test React Live Streaming UI Kit before releasing my app?

Test the host and viewer roles, supported publishing or playback events and reconnect behavior.

Read the platform guide

How do I customize the interface for React Live Streaming UI Kit?

Wrap the React viewer components in UIKitProvider to select a light or dark theme. For example, render LiveList with columnCount={5} and an onLiveRoomClick handler that opens your viewer route. Your handler must connect the selected room to the viewing flow; changing list columns alone does not join a stream. This page's React integration builds audience viewing, with broadcasting handled by a separate host integration.

Read the customization guide

React Live Integration Support

Integration questions

Get setup help for the React Live Streaming UI Kit.

View Developer Documentation

Talk about your application

Discuss your product, expected usage, and integration needs.

Contact Sales

Build a React Live Viewing Experience

Connect your viewers to live video, comments, and room discovery.

Get started for free View the UI Kit Guide

React Live Streaming UI Kit

React Live Streaming UI Kit Docs & Examples

Component Reference

Integration Guides

Examples & Source

Watch Product Demos in React

Live Event Viewing in React

React Live Video Viewing Features

Watch live

Join the conversation

Discover more

Explore React Live Streaming Components

Put the live moment first

Let the audience join in

Help viewers find what is live

Customize Your React Live UI Kit

Your visual identity

Comments & content

Add Live Streaming to Your React App

Create your app

Add the React Live Streaming UI Kit

Connect your first room

React Live Streaming UI Kit FAQs

Can I build a React host broadcasting page?

How does this UI Kit fit with the SDK?

How do I connect a React live viewer to a broadcast?

How do I authenticate users of the React Live Streaming UI Kit?

Is the React Live Streaming UI Kit free to use?

How do I integrate React Live Streaming UI Kit with React?

How do I test React Live Streaming UI Kit before releasing my app?

How do I customize the interface for React Live Streaming UI Kit?

React Live Integration Support

Integration questions

Talk about your application

Build a React Live Viewing Experience