# @daily-co/daily-react 中文文档

规范地址：https://npmcn.com/package/%40daily-co/daily-react/

版本：0\.26\.1
npm 元数据更新时间：2026-10-16T14:30:34.240Z
中文译文更新时间：2026-11-11T08:57:35.493Z
软件包许可：BSD-2-Clause

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40daily-co/daily-react
原文对照：https://npmcn.com/package/%40daily-co/daily-react/?lang=original
项目主页：https://docs.daily.co/reference/daily-react
源码仓库：https://github.com/daily-co/daily-react

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：664 kB，82 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- Node.js 要求：\>=12
- 运行依赖：3 个
- peer 依赖：jotai ^2，react ^16\.8 \|\| ^17\.0 \|\| ^18\.0 \|\| ^19\.0，react-dom ^16\.8 \|\| ^17\.0 \|\| ^18\.0 \|\| ^19\.0，@daily-co/daily-js \>=0\.68\.0 \<1
- 首次发布：2022-11-15T09:36:18.421Z
- 最新版本发布：2026-10-16T14:30:33.600Z
- 近 30 天下载量：843644（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：46（近 12 个月 6 个）

## 中文简介

每日反应可以方便整合 [@daily-co/daily-js (英语)](https://www.npmjs.com/package/@daily-co/daily-js) 在反应应用程序中.

## 安装

```sh
npm install @daily-co/daily-react
```

也可以使用：`pnpm add @daily-co/daily-react`、`yarn add @daily-co/daily-react`、`bun add @daily-co/daily-react`

## README

# 每日反应

每日反应可以方便整合 [@daily-co/daily-js (英语)](https://www.npmjs.com/package/@daily-co/daily-js) 在反应应用程序中.

## 使用量

要从每日反应开始, 包括 [`DailyProvider`](https://docs.daily.co/reference/daily-react/daily-provider) 在您的应用程序中:

```jsx
import { DailyProvider } from '@daily-co/daily-react';

function App({ roomUrl }) {
  return <DailyProvider url={roomUrl}>{/* … */}</DailyProvider>;
}
```

在您的应用程序中, 您可以访问 Daily React :

```jsx
import {
  useParticipantIds,
  useParticipantProperty,
} from '@daily-co/daily-react';

function ParticipantRow({ id }) {
  const [username, videoState, audioState] = useParticipantProperty(id, [
    'user_name',
    'tracks.video.state',
    'tracks.audio.state',
  ]);

  return (
    <li style={{ display: 'flex', gap: 8 }}>
      <span>{username ?? 'Guest'}</span>
      <span>📷{videoState === 'playable' ? '✅' : '❌'}</span>
      <span>🎙️{audioState === 'playable' ? '✅' : '❌'}</span>
    </li>
  );
}

function Participants() {
  const participantIds = useParticipantIds({
    filter: 'remote',
    sort: 'user_name',
  });

  return (
    <ul>
      {participantIds.map((id) => (
        <ParticipantRow key={id} id={id} />
      ))}
    </ul>
  );
}
```

通过阅读我们的文件了解更多每日反应 [https://docs.daily.co/参考文献/daily-react](https://docs.daily.co/reference/daily-react)。 。 。 .

## 安装

这个 `daily-react` 软件包发布到 [无](https://npmjs.com/)。要安装最新的稳定版本,请运行以下命令之一:

```bash
npm install @daily-co/daily-react @daily-co/daily-js jotai

# or with yarn

yarn add @daily-co/daily-react @daily-co/daily-js jotai
```

注意到 `@daily-co/daily-react` 需求 [@daily-co/daily-js (英语)](https://www.npmjs.com/package/@daily-co/daily-js) 财务报告和审定财务报表 [乔泰](https://www.npmjs.com/package/jotai) 作为同伴的依赖关系.

`@daily-co/daily-react` 使用 `jotai`。您可以读取更多关于 `jotai` 中标 [导言](https://jotai.org/)。 。 。 .

## 测试

我们设立了自动测试 使用 [欢笑](https://jestjs.io/) 财务报告和审定财务报表 [测试库](https://testing-library.com/)。可以使用下列命令进行测试:

```bash
npm test

# or with yarn

yarn test
```

## 捐款

请到我们家去 [捐款](https://npmcn.com/package/%40daily-co/daily-react/CONTRIBUTING.md) 指南,以学习如何为 `daily-react`。 。 。 .

如果你对《每日新闻》有一般性问题或需要技术援助,请通过 [帮助@ daily.co](mailto:help@daily.co)。 。 。 .

## 常见问题

### @daily-co/daily-react 是什么？

每日反应可以方便整合 @daily-co/daily-js \(英语\) 在反应应用程序中\.

### 如何安装 @daily-co/daily-react？

在项目目录运行 npm install @daily-co/daily-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：jotai（^2）、react（^16\.8 \|\| ^17\.0 \|\| ^18\.0 \|\| ^19\.0）、react-dom（^16\.8 \|\| ^17\.0 \|\| ^18\.0 \|\| ^19\.0）、@daily-co/daily-js（\>=0\.68\.0 \<1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @daily-co/daily-react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @daily-co/daily-react 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @daily-co/daily-react 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=12。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @daily-co/daily-react 可以商用吗？

@daily-co/daily-react 使用 BSD-2-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @daily-co/daily-react 的下载量有多少？

根据 npm 官方下载统计，@daily-co/daily-react 在 2026/10/11 – 2026/11/09 这 30 天内被下载 843,644 次，日均约 28,121 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @daily-co/daily-react 还在维护吗？

最新版本 0\.26\.1 发布于 2026/10/16（25 天前）；至今共发布 46 个版本，其中过去 12 个月发布了 6 个；首次发布于 2022/11/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。