Neapolitan Pizza Margherita

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

    Install

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

    DownloadsWeekly Downloads

    2,746

    Version

    0.5.0

    License

    BSD-2-Clause

    Unpacked Size

    653 kB

    Total Files

    93

    Last publish

    Collaborators

    • karldaily
    • moishel
    • jamsea
    • paweldaily
    • paulv-daily
    • aconchillo
    • jasminedaly-daily
    • filipi.fuchter
    • patrick.rothweil.daily
    • daily_wyatt
    • landstrom
    • sunahsuh
    • rajneeshksoni
    • ruthless_daily
    • rory-sawyer
    • kwindla
    • kompfner_daily
    • christian-daily
    • steve-daily
    • vipyne-dailyco
    • cbrianhill
    • jessmitchell
    • chad-daily
    • jptaylor
    • ashley_at_daily