useCallFrame

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

Hooks

Components

DailyProvider

daily-js methods

createFrame()

useCPULoad useCallObject

​Parameters

​Return value

​Example

​See also