useCallFrame
useCallFrame(): DailyCall
This hook manages a call frame instance in order to embed Daily Prebuilt.
When manually managing call frame instances in React, it's easy to run into issues, like Error: Duplicate DailyIframe instances are not allowed,
specifically in React's Strict Mode. useCallFrame() helps prevent that.
Params (optional)
useCallFrame accepts the same configuration options as createFrame().
| Parameter | Type | Description |
|---|---|---|
parentElRef | MutableRefObject<HTMLElement> | If specified, Daily's iframe will be appended to the referenced element. Otherwise it will be appended as a child of document.body. |
options | DailyFactoryOptions | Contains all factory properties that are passed to createFrame(). Check DailyCall properties for details. |
shouldCreateInstance | Function | Optional callback function with a boolean return to control when the call frame instance should be created. |
Return type
| Type | Description |
|---|---|
DailyCall | The DailyCall instance. |
Sample code
import { DailyProvider, useCallFrame } from '@daily-co/daily-react';import { useCallback, useRef } from 'react';export const UseCallFrameDemo = () => {const callRef = useRef(null);const callFrame = useCallFrame({parentElRef: callRef,options: {iframeStyle: {position: 'fixed',top: 0,left: 0,width: '100%',height: '100%',},},});return (/** Yes, you can pass a callFrame to DailyProvider!* Keep in mind that Daily's iframe runs in a separate* secure web context, so some data is not available,* such as audio and video tracks.*/<DailyProvider callObject={callFrame}><div ref={callRef} /></DailyProvider>);};