室内反应库

100ms Room Kit 提供了简单易用UI组件在您的应用程序中构建Live Streaming & Video Conferencing 体验的简单 & 方便.

安装

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

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

使用量

使用房间代码

import { HMSPrebuilt } from '@100mslive/roomkit-react'

export default App() {
    return (
        <HMSPrebuilt roomCode={<room-code>} />
    );
}

使用认证脚本

import { HMSPrebuilt } from '@100mslive/roomkit-react'

export default App() {
    return (
        <HMSPrebuilt authToken={<auth-token>} />
    );
}

关于其他道具,请参考 文档

自定义

当我们提议 无代码自定义预建,您可以叉出您的预建组件副本,并修改代码,以便进行更多的微调.

预建自定义可用于 100毫分高压板。 。 。 .

理解结构

这个 src 文件夹包含所有组件, Button, (中文(简体) ), Accordion 包括:. 这个 Prebuilt 文件夹包含完整的预建执行 . App.tsx 是一个包含 HMSPrebuilt 组件.

预建中的主要组件

自定义样式

基础配置 拥有您可以使用的所有变量。 主题的任何更改都可以在此进行. 除非您想要引入新的变量, 很可能不需要额外的修改 .

何时 HMSThemeProvider 在顶层使用,所有变量将提供给此组件树下的所有儿童.

对于使用基元件创建的组件,例如 Box, (中文(简体) ), Flex, (中文(简体) ), Button 等,css Prop可供修改样式. 在css道具内,您可以访问来自 基础配置。 。 。 .

捐款

• 确定您创建的任何新组件/文件 Typescript。 。 。 .

• 别忘了为按钮,菜单等可操作性设备添加数据测试ID.

• 设置适当的工具( E)ESLint 语录 财务报告和审定财务报表 高级在你的编辑.

• yarn lint 将会在您推动更改前运行, 所以每次推出失败时, 请检查是否有提示错误 .

读这个 医生 用于编码指南.

社区与支持

• GitHub 问题 - 使用Web SDK提交任何错误.
• 盘子 - 问问题从百米队获得帮助.
• 联系人 ——联系百米团队,获取定价信息,了解我们如何帮助您上线,或者更多地了解平台.