tuikit-live-manager-sdk-react

中文文档: 中文版

React core component package for TUILiveKit Manager — helps you build a live streaming operations management dashboard quickly.

This package is delivered as a closed-source distribution — compiled output and type declarations (.js / .d.ts / .css) only, no core business source code.

Architecture Overview

TUILiveKit Manager React SDK offers two development modes for different scenarios:

| Mode | Description | When to Use | |------|-------------|-------------| | With UI | Use pre-built page components, out of the box | Quick integration, standard dashboard | | Without UI | Use three core State Hooks + tuikit-atomicx-react + tuikit-core to build your own UI | Deep customization, embedding, non-standard UX |

Both modes can be mixed, sharing the same configuration and customization capabilities.

Prerequisites

Step 1: Activate Service

See Activate TUILiveKit Services to obtain SDK access.

Step 2: Install Dependencies

Install the SDK in your React project. With pnpm, peer dependencies are auto-installed:

pnpm add tuikit-live-manager-sdk-react

With UI: Using Pre-built Components

The fastest way — mount pre-built components and get a complete dashboard in minutes.

Configure the SDK

Create live-manager.ts:

import { configureLiveManager } from 'tuikit-live-manager-sdk-react';

const config = configureLiveManager({
  brand: { app: { title: 'Live Manager' } },
  menus: {
    liveMonitor: { enabled: true },
    roomList: { enabled: true },
    giftConfig: { enabled: true },
  },
});

export default config;

Option A: Direct Component Usage

Use in a React project that already has the SDK as a dependency:

import { LiveMonitor, LiveList, LiveControl, GiftConfig, GiftCategory } from 'tuikit-live-manager-sdk-react';
import { createRoot } from 'react-dom/client';

function App() {
  return <LiveList />;
}

createRoot(document.getElementById('root')!).render(<App />);

Pre-built Page Components

| Component | Module Key | Description | |-----------|------------|-------------| | LiveMonitor | live-monitor | Multi-screen live monitoring, low-latency playback | | LiveList | room-list | Room list, create/edit/close rooms | | LiveControl | room-control | Room details, statistics, user management | | GiftConfig | gift-config | Gift CRUD, category management | | GiftCategory | gift-config | Gift category management | | RiskControl | risk-control | Content moderation and risk management |

Lazy load: import { LiveList } from 'tuikit-live-manager-sdk-react/views/LiveList'

Without UI: Using Core State Hooks

When you need full UI control or need to embed management features into an existing system, build with this combination:

Your Custom UI (React Components)
    │
    ├── SDK Three Core Hooks       ← Data & Operations Layer
    │   ├── useLiveMonitorState()   Live monitoring
    │   ├── useGiftState()           Gift management
    │   └── useRiskControlState()    Risk control
    │
    ├── tuikit-atomicx-react      ← Video & IM Rendering Layer
    │   ├── LiveView               Live video rendering
    │   ├── BarrageList / BarrageInput  Barrage display & input
    │   ├── useLiveListState       Join/leave live streams
    │   ├── useLiveAudienceState   Audience list management
    │   ├── useLoginState          Login authentication
    │   └── useLivePlayerState     Player control
    │
    └── tuikit-core utilities     ← Auth, HTTP, RUM, tools

Key difference: SDK's State Hooks handle dashboard data operations (list rooms, configure gifts, moderate content), while tuikit-atomicx-react handles video/audio & IM rendering (streaming video, barrage messages, audience lists). Complete Without-UI development requires both.

Architecture

useLiveMonitorState()

Core Hook for live monitoring. Singleton pattern.

import { useLiveMonitorState } from 'tuikit-live-manager-sdk-react';

const {
  init,            // Initialize SDK config (baseURL, etc.)
  liveList,        // Live list MonitorLiveInfo[]
  hasMore,         // Whether more pages exist
  currentLive,     // Currently selected live
  setCurrentLive,  // Set current live by liveId
  fetchLiveList,   // Fetch live list (with pagination)
  createLive,      // Create a live → Promise<MonitorLiveInfo>
  updateLive,      // Update current live info
  endLive,         // End a live (optional liveId or uses currentLive)
  fetchLiveDetail,  // Fetch live detail (including stream info)
  fetchLiveStats,   // Fetch live statistics
  startPlay,        // Start playback (liveId + containerId)
  stopPlay,         // Stop playback
} = useLiveMonitorState();

Call init({ baseURL }) before other operations. This is a singleton Hook shared across components.

Example: Custom live list

import { useLiveMonitorState } from 'tuikit-live-manager-sdk-react';
import { useEffect, useState } from 'react';

function CustomLiveList() {
  const { init, liveList, fetchLiveList, createLive, setCurrentLive, fetchLiveDetail } = useLiveMonitorState();
  const [name, setName] = useState('');

  useEffect(() => {
    init({ baseURL: 'http://localhost:9000/api' });
    fetchLiveList();
  }, []);

  return (
    <div>
      <input value={name} onChange={e => setName(e.target.value)} />
      <button onClick={async () => {
        const live = await createLive({ liveName: name, coverUrl: '' });
        setCurrentLive(live.liveId);
        await fetchLiveDetail();
      }}>Create Live</button>
      <ul>
        {liveList.map(l => (
          <li key={l.liveId} onClick={() => setCurrentLive(l.liveId)}>
            {l.liveName} — {l.onlineCount} viewers
          </li>
        ))}
      </ul>
    </div>
  );
}

useGiftState()

Core Hook for gift management. Singleton pattern.

import { useGiftState } from 'tuikit-live-manager-sdk-react';

const {
  giftList,                  // Gift list GiftItem[]
  giftCategoryList,          // Category list GiftCategoryItem[]
  fetchGiftList,             // Fetch gift list (also returns categories)
  createGift,                // Create a gift → Promise<string>
  updateGift,                // Update a gift
  deleteGift,                // Delete a gift (by giftId)
  createGiftCategory,        // Create a gift category
  updateGiftCategory,        // Update a gift category
  deleteGiftCategory,        // Delete a gift category
  addGiftCategoryRelations,  // Add gift-category relations
  deleteGiftCategoryRelations, // Remove gift-category relations
  fetchGiftLanguages,        // Fetch multi-language info
  setGiftLanguages,          // Set multi-language info
} = useGiftState();

useRiskControlState(options)

Core Hook for risk control. Requires liveId.

import { useRiskControlState } from 'tuikit-live-manager-sdk-react';

const {
  // Moderation
  textModerationAvailable,        // Whether moderation API is available
  moderationMode,                 // cloud | custom
  textModerationList,             // Text moderation items
  textModerationTotal,            // Total item count
  textModerationLoading,          // Loading state
  fetchTextModerationList,        // Fetch moderation list
  approveTextModerationItems,     // Batch approve items
  bypassCorrectionKeyword,        // Bypass correction keyword (cloud only)

  // Member management
  muteMember,                     // Mute a member
  unmuteMember,                   // Unmute a member
  banMember,                      // Ban a member
  unbanMember,                    // Unban a member
  mutedList,                      // Muted members list
  bannedList,                     // Banned members list

  // Chat management
  sendViolationWarning,           // Send violation warning
  sendAdminMessage,               // Send admin message
} = useRiskControlState({ liveId: 'xxx', pageSize: 20 });

tuikit-atomicx-react Rendering

Complete Without-UI development requires tuikit-atomicx-react for video/audio & IM rendering:

| Category | Import | Description | |------|------|------| | Video Playback | LiveView (from tuikit-atomicx-react) | Live video rendering component | | Barrage | BarrageList, BarrageInput (from tuikit-atomicx-react) | Barrage message display & input | | Audience | LiveAudienceList, useLiveAudienceState (from tuikit-atomicx-react) | Audience list component & state | | Live Ops | useLiveListState, LiveListEvent (from tuikit-atomicx-react) | Join/leave live, event subscriptions | | Auth | useLoginState (from tuikit-atomicx-react) | Login & user info | | Player | useLivePlayerState (from tuikit-atomicx-react) | Control bar visibility, player settings |

tuikit-core Utilities

Available for use alongside the three core Hooks:

| Category | Exports | |------|------| | Auth | login, isLoggedIn, getCurrentUserId, getUserProfilePortrait, batchGetUserProfilePortrait | | HTTP | initHttpClient, request, get, post, put, del | | Tools | createLogger, safelyParse, copyText, parseTextWithEmoji, image upload utilities | | Errors | LiveManagerError, getErrorMessage, isClientError, isServerError | | RUM | reportEvent, reportTime, reportBusinessOp, reportPageView |

Customization

Branding & Menus

Both modes support customization via CustomerExtensionV1 config:

import type { CustomerExtensionV1 } from 'tuikit-live-manager-sdk-react';

export default {
  brand: { app: { title: 'My Live Manager', logo: '/assets/my-logo.png' } },
  menus: {
    liveMonitor: { enabled: true, label: 'Live Monitor' },
    roomList: { enabled: true, label: 'Room Management' },
    giftConfig: { enabled: true, label: 'Gift Configuration' },
  },
} satisfies CustomerExtensionV1;

Component Slots (With-UI Mode)

Inject custom components at key positions in pre-built pages:

| Slot Key | Props | Description | |----------|-------|-------------| | liveList.tableExtraColumns | { live: MonitorLiveInfo } | Extra table column | | liveList.rowActions | { live: MonitorLiveInfo } | Row action button | | liveMonitor.userActionExtraItems | { live: MonitorLiveInfo } | Extra user action | | liveControl.customControlPanel | { liveInfo, stats } | Custom control panel | | giftConfig.giftTableExtraColumns | { gift } | Extra gift table column | | giftConfig.giftRowActions | { gift } | Gift row action button | | layout.headerRight | — | Header right area | | layout.sidebarBottom | — | Sidebar bottom area |

API Reference

configureLiveManager(extension?)

interface CustomerExtensionV1<TComponent = unknown> {
  version?: '1';
  brand?: BrandConfig;
  menus?: MenuExtension;
  routes?: RouteExtension<TComponent>;
  components?: ComponentSlots<TComponent>;
  features?: FeatureFlags;
  runtime?: RuntimeConfig;
}

function configureLiveManager<TComponent = unknown>(
  extension?: CustomerExtensionV1<TComponent>,
): LiveManagerAppConfig<TComponent>

FAQ

Can I mix With-UI and Without-UI modes?

Yes. For example, use useLiveMonitorState() for a custom page while mounting <GiftConfig /> directly in another page. Both modes share the same SDK instance.

How do I customize the title and logo?

Set title and logo in configureLiveManager's brand.app.

What languages are supported?

zh-CN (Simplified Chinese) and en-US (English). Set via runtime.language.

Related Documentation

• TUILiveKit Manager — Full Documentation
• Getting Started (Web React)
• Activate TUILiveKit Services
• TUILiveKit Admin Account Management