This package has been deprecated

Author message:

@daily-co/daily-react-hooks has moved to @daily-co/daily-react. Please upgrade for the best experience when building with Daily.

@daily-co/daily-react-hooks
TypeScript icon, indicating that this package has built-in type declarations

0.5.0 • Public • Published

Daily React Hooks

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

Usage

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

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

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

Then in your application you can access Daily React Hooks:

import { useParticipant, useParticipantIds } from '@daily-co/daily-react-hooks';

function ParticipantRow({ id }) {
  const participant = useParticipant(id);

  return (
    <li style={{ display: 'flex', gap: 8 }}>
      <span>{participant?.user_name ?? 'Guest'}</span>
      <span>📷{participant?.tracks?.video?.state === 'playable' ? '✅' : '❌'}</span>
      <span>🎙️{participant?.tracks?.audio?.state === '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 Hooks by reading our docs at https://docs.daily.co/reference/daily-react-hooks.

Installation

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

npm install @daily-co/daily-react-hooks @daily-co/daily-js recoil

# or with yarn

yarn add @daily-co/daily-react-hooks @daily-co/daily-js recoil

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

@daily-co/daily-react-hooks manages its internal state using recoil. You can read more about recoil in their Motivation statement.

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

In case you've got general questions about Daily or need technical assistance, please reach out via help@daily.co.

Dependencies (2)

Dev Dependencies (31)

Package Sidebar

Install

npm i @daily-co/daily-react-hooks

Weekly Downloads

343

Version

0.5.0

License

BSD-2-Clause

Unpacked Size

653 kB

Total Files

93

Last publish

Collaborators

  • markatdaily
  • paulidaily
  • moishel
  • jamsea
  • aconchillo
  • filipi.fuchter
  • sunahsuh
  • rajneeshksoni
  • ruthless_daily
  • kwindla
  • kompfner_daily
  • christian-daily
  • vipyne-dailyco
  • cbrianhill
  • chad-daily
  • jptaylor