Installation

Install the packages

Install Daily React together with its two peer dependencies, @daily-co/daily-js and jotai:

npm install @daily-co/daily-react @daily-co/daily-js jotai

yarn add @daily-co/daily-react @daily-co/daily-js jotai

pnpm add @daily-co/daily-react @daily-co/daily-js jotai

@daily-co/daily-js and jotai are peer dependencies, not bundled. Installing them explicitly guarantees that your app and Daily React share a single version of each. This matters if you also use daily-js directly (for example, to create your own call object) or use jotai for your app’s own state, because two copies of either would not see each other’s state.

Set up the provider

Everything in Daily React reads from a call object held by DailyProvider. Wrap the part of your tree that needs call state in it. The simplest setup, and the one we recommend for most apps, is to let the provider create and manage the call object: pass your room url (and any other factory options such as token or userName) straight to DailyProvider.

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

function App() {
  return (
    <DailyProvider url="https://your-domain.daily.co/room-name">
      <Call />
    </DailyProvider>
  );
}

The provider owns the call object’s lifecycle, so there is no instance for you to create, store, or tear down. This is the hardest setup to get wrong, which is why it is the default recommendation.

The provider recreates the call object whenever a creation prop’s value changes (url, token, and so on), tearing down the current call and resetting all call and error state. These props are compared by value, so re-passing an equivalent object on each render is safe; only an actual value change triggers a rebuild, and nothing defers it while a call is in progress. Treat creation props as stable configuration for the lifetime of a call.

Creating the call object yourself

Pass an existing callObject instead when you need direct control over the instance, for example to access it before the provider mounts, share it outside the provider tree, or create it conditionally. Create it with useCallObject:

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

function App() {
  const callObject = useCallObject({
    options: {
      // createCallObject() factory options:
      // subscribeToTracksAutomatically: true,
    },
  });

  return (
    <DailyProvider callObject={callObject}>
      <Call />
    </DailyProvider>
  );
}

If you create the instance yourself, use useCallObject rather than calling Daily.createCallObject() directly. It guards against the Duplicate DailyIframe instances are not allowed error that otherwise appears under React Strict Mode, where effects run twice in development.

Embedding Daily Prebuilt instead

If you want Daily’s ready-made call UI rather than a custom one, create a Prebuilt iframe with useCallFrame and hand it to the same provider:

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

function PrebuiltApp() {
  const wrapperRef = useRef(null);
  const callFrame = useCallFrame({
    parentElRef: wrapperRef,
    options: {
      iframeStyle: { width: '100%', height: '100%', border: '0' },
    },
  });

  return (
    <DailyProvider callObject={callFrame}>
      <div ref={wrapperRef} style={{ height: '100vh' }} />
    </DailyProvider>
  );
}

A Prebuilt iframe runs in a separate, secure browsing context. Some data the hooks expect is not available across that boundary, most notably raw audio and video tracks, so media hooks like useMediaTrack will not return tracks for an iframe instance.

Next.js and server-side rendering

Daily React’s hooks depend on browser APIs and React state, so they must run on the client.

In the Next.js App Router, mark any component that imports Daily React hooks or components with 'use client' at the top of the file.
If a hook touches window or media devices during render, gate the component so it only mounts in the browser (for example, render it after the component has mounted, or with a dynamic import using { ssr: false }).

'use client';

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

export function CallRoot({ url, children }) {
  return <DailyProvider url={url}>{children}</DailyProvider>;
}

If your app already uses Jotai, pass your store to both your <Provider> and to DailyProvider via the jotaiStore prop so Daily React’s atoms live in the same store:

import { DailyProvider } from '@daily-co/daily-react';
import { createStore, Provider } from 'jotai';

const store = createStore();

function App() {
  return (
    <Provider store={store}>
      <DailyProvider url="https://your-domain.daily.co/room-name" jotaiStore={store}>
        <Call />
      </DailyProvider>
    </Provider>
  );
}

Getting Started

Core Concepts

Building Call Features

Installation

Install the packages

Set up the provider

Creating the call object yourself

Embedding Daily Prebuilt instead

Next.js and server-side rendering

Next steps

Quickstart

The call object and provider

​Install the packages

​Set up the provider

​Creating the call object yourself

​Embedding Daily Prebuilt instead

​Next.js and server-side rendering

​Sharing state with your own Jotai store

​Next steps

Quickstart

The call object and provider

Install the packages

Set up the provider

Creating the call object yourself

Embedding Daily Prebuilt instead

Next.js and server-side rendering

Sharing state with your own Jotai store

Next steps