Skip to main content
<DailyProvider callObject={callObject}> Stores call state and manages a call object instance, giving every component in your tree access to it. Two modes are supported: pass an existing call object, or provide props for DailyProvider to create one. We recommend utilizing useCallObject to create your own call object instance.

​
Props

​
Existing call object mode

​
callObject
Object
required
Pre-initialized call object instance (instantiated via createCallObject()).

​
Call object creation mode

​
url
string
required
The URL of the Daily room to join.
​
audioSource
string | MediaStreamTrack | boolean
Audio source for the call. See DailyCall properties for details.
​
videoSource
string | MediaStreamTrack | boolean
Video source for the call. See DailyCall properties for details.
​
dailyConfig
Object
Daily configuration options. See DailyCall properties for details.
​
receiveSettings
Object
Receive settings for the call. See DailyCall properties for details.
​
subscribeToTracksAutomatically
boolean
Whether to automatically subscribe to tracks. See DailyCall properties for details.
​
token
string
Meeting token. See DailyCall properties for details.
​
userName
string
Display name for the local participant. See DailyCall properties for details.
Changing any of the props in call object creation mode will destroy the current instance and create a new one with the updated props.

​
Optional props

​
jotaiStore
Object
store to be passed to Daily React’s internal Jotai <Provider>. If you use Jotai in your app, this will store Daily React’s internal state atoms in your Jotai store.

​
Example

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

function App() {
  // Create an instance of the Daily call object
  const callObject = useCallObject();

  return <DailyProvider callObject={callObject}>{children}</DailyProvider>;
}

​
Store Daily React’s state in your own Jotai Provider

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

const jotaiStore = createStore();

function App() {
  // Create an instance of the Daily call object
  const callObject = useCallObject();

  return (
    <Provider store={jotaiStore}>
      <DailyProvider callObject={callObject} jotaiStore={jotaiStore}>
        {children}
      </DailyProvider>
    </Provider>
  );
}

​
See also

Hooks