Daily React makes it easier to integrate @daily-co/daily-js in React applications.
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 { useParticipant, useParticipantIds } from '@daily-co/daily-react';
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 by reading our docs at https://docs.daily.co/reference/daily-react.
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 recoil
# or with yarn
yarn add @daily-co/daily-react @daily-co/daily-js recoil
Notice that @daily-co/daily-react
requires @daily-co/daily-js and recoil as peer dependencies.
@daily-co/daily-react
manages its internal state using recoil
. You can read more about recoil
in their Motivation statement.
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
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 help@daily.co.