Skip to main content
useCallFrame(): DailyCall When manually managing call frame instances in React, it’s easy to run into issues like Error: Duplicate DailyIframe instances are not allowed, especially in React’s Strict Mode. useCallFrame() handles that for you.

​
Parameters

useCallFrame accepts the same configuration options as createFrame().
​
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 value

DailyCall
The DailyCall instance. Wraps createFrame().

​
Example

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>
  );
};

​
See also

Hooks

Components

daily-js methods