Daily React

Daily React makes it easier to integrate @daily-co/daily-js in React applications.

Usage

To get started with Daily React, include DailyProvider in your app:

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

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

Then in your application you can access 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>
  );
}

Learn more about Daily React by reading our docs at https://docs.daily.co/reference/daily-react.

Installation

The daily-react package is published to npm. To install the latest stable version, run one of the following commands:

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

Notice that @daily-co/daily-react requires @daily-co/daily-js and jotai as peer dependencies.

@daily-co/daily-react manages its internal state using jotai. You can read more about jotai in their Introduction.

Tests

We've set up automatic tests using jest and Testing Library. You can run the tests using the following command:

npm test

# or with yarn

yarn test

Contributions

Please head over to our contributing guide to learn more about how you can contribute to daily-react.

In case you've got general questions about Daily or need technical assistance, please reach out via [email protected].