> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daily.co/llms.txt
> Use this file to discover all available pages before exploring further.

# useCallFrame

> This hook manages a call frame instance in order to embed Daily Prebuilt.

`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](https://react.dev/reference/react/StrictMode). `useCallFrame()` handles that for you.

## Parameters

`useCallFrame` accepts the same configuration options as [`createFrame()`](/reference/daily-js/factory-methods/create-frame).

<ParamField body="parentElRef" type="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`.
</ParamField>

<ParamField body="options" type="DailyFactoryOptions">
  Contains all factory properties that are passed to `createFrame()`. Check [DailyCall properties](/reference/daily-js/types/daily-call-options) for details.
</ParamField>

<ParamField body="shouldCreateInstance" type="Function">
  Optional callback function with a boolean return to control when the call frame instance should be created.
</ParamField>

## Return value

<ResponseField name="" type="DailyCall">
  The [`DailyCall`](/reference/daily-js/daily-call-client) instance. Wraps [createFrame()](/reference/daily-js/factory-methods/create-frame).
</ResponseField>

## Example

```jsx theme={null}
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

<CardGroup>
  <Card title="Hooks" icon="code" iconType="solid">
    * [useCallObject()](/reference/daily-react/use-call-object)
    * [useDaily()](/reference/daily-react/use-daily)
  </Card>

  <Card title="Components" icon="layout" iconType="solid">
    * [DailyProvider](/reference/daily-react/daily-provider)
  </Card>

  <Card title="daily-js methods" icon="code" iconType="solid">
    * [createFrame()](/reference/daily-js/factory-methods/create-frame)
  </Card>
</CardGroup>