daily-react

Daily React wraps the low-level @daily-co/daily-js SDK in an idiomatic set of React hooks and components, so building a video or audio calling UI feels like normal React state management instead of manual event-listener wiring. A single DailyProvider exposes call state through Jotai atoms, and dozens of purpose-built hooks (useParticipantIds, useDevices, useScreenShare, useTranscription, and more) let components subscribe to just the slice of call state they need.

Beyond hooks, the package ships ready-made DailyAudio and DailyVideo components for rendering participant media tracks, plus utilities for dial-in/dial-out, live streaming, recording, and meeting session state. It targets teams already using Daily’s calling infrastructure who want to build a custom React frontend without reimplementing participant tracking, device negotiation, or throttled event handling themselves.

What You Get

• A DailyProvider component that creates or wraps a Daily call object and exposes it to the whole component tree via context and Jotai atoms
• Over 40 hooks covering participants, devices, screen share, recording, live streaming, transcription, dial-in/dial-out, network quality, and meeting session state
• Prebuilt DailyAudio, DailyAudioTrack, and DailyVideo components for rendering remote and local media tracks without manual MediaStream wiring
• Throttled and prioritized event subscription helpers (useDailyEvent, useThrottledDailyEvent) that avoid re-render storms during high-frequency call events
• TypeScript types for every call object shape re-exported from @daily-co/daily-js, so consuming apps get full autocomplete on participant and event data

Common Use Cases

• Building a custom video conferencing UI (participant grid, controls, screen share) on top of Daily’s infrastructure
• Adding in-app video/audio calling to an existing React product without hand-rolling WebRTC signaling
• Building call-recording or live-streaming control panels that start/stop and monitor Daily recording and RTMP/HLS streaming instances
• Rendering real-time network quality and CPU load indicators to warn users of a degrading call

Under The Hood

Architecture The library is organized as a thin reactive layer over a single DailyCall instance. DailyProvider (src/DailyProvider.tsx) either accepts an externally-created callObject or constructs one via useCallObject, then registers a single generic handleEvent listener that fans out to per-hook subscriptions stored in a ref-based eventsMap, avoiding one listener per hook. State containers like DailyParticipants, DailyDevices, DailyRecordings, and DailyDialin are separate provider components composed inside DailyProvider, each owning a slice of Jotai atom state (src/lib/jotai-custom.ts’s equalAtomFamily) that hooks like useParticipantIds and useDevices read from; this keeps unrelated state slices from causing cross-cutting re-renders. Hooks like useDaily and useDailyEvent simply read DailyContext/DailyEventContext, so the dependency direction is provider components at the root pushing state down through atoms, with leaf hooks doing narrow, memoized reads.

Tech Stack Written in TypeScript, built with Rollup (rollup-plugin-typescript, terser, peer-deps-external) into CJS and ESM bundles under dist/. Runtime dependencies are minimal and deliberate: jotai (^2) for atomic state, jotai-family for parameterized atom families, fast-deep-equal and a custom customDeepEqual (src/lib/customDeepEqual.ts, with special-cased MediaStream/MediaStreamTrack comparison) to avoid unnecessary re-renders, and lodash.throttle for event throttling. @daily-co/daily-js, react, react-dom, and jotai are all peer dependencies rather than bundled, keeping the package thin and letting consumers control versions. Bundle size is enforced via size-limit (16-17KB per entry).

Code Quality Tests are extensive: nearly every hook and component under src/hooks and src/components has a matching test under test/hooks and test/components using Jest 27, ts-jest, and React Testing Library, with a shared test/.test-utils/mocks.ts and event-emitter.ts harness for simulating Daily call events. ESLint is configured with typescript-eslint, react-hooks, simple-import-sort, and a pre-commit husky hook running the linter, and CI runs the suite via GitHub Actions. Naming is consistent (useX hook convention, DailyX provider/component convention) and types are precise, re-exporting and extending types from @daily-co/daily-js rather than redefining them.

API Design The public API is a flat, discoverable set of camelCase hooks that mirror the underlying Daily call object’s concepts one-to-one (useParticipant, useDevices, useRecording), which keeps the learning curve low for anyone already familiar with Daily’s REST/JS API. Getting started requires only wrapping the app in DailyProvider and importing the specific hooks needed; there is no required boilerplate beyond that, and the README’s copy-pasteable participant-list example demonstrates the intended usage pattern directly.