每日反应

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

使用量

要从每日反应开始, 包括 DailyProvider 在您的应用程序中:

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

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

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

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。 。 。 .

安装

这个 daily-react 软件包发布到 无。要安装最新的稳定版本,请运行以下命令之一:

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 (英语) 财务报告和审定财务报表 乔泰 作为同伴的依赖关系.

@daily-co/daily-react 使用 jotai。您可以读取更多关于 jotai 中标 导言。 。 。 .

测试

我们设立了自动测试 使用 欢笑 财务报告和审定财务报表 测试库。可以使用下列命令进行测试:

npm test

# or with yarn

yarn test

捐款

请到我们家去 捐款 指南,以学习如何为 daily-react。 。 。 .

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