# useContainerAttach

Hook to register a custom container element with the player context

## Import

```tsx
import { useContainerAttach } from "@videojs/react";
```

`useContainerAttach` returns a setter function for registering a DOM element as the player’s container. The built-in `Container` uses this internally; you only need it when building a custom container element.

**CustomContainer.tsx**

```tsx
import { useContainerAttach } from "@videojs/react";

function CustomContainer({ children }: { children: React.ReactNode }) {
  const setContainer = useContainerAttach();
  return <div ref={setContainer}>{children}</div>;
}
```

## Who needs this

You only need `useContainerAttach` if you’re replacing the built-in `Container` with a custom element. For example, if you’re building a container with custom fullscreen behavior or a non-standard layout boundary.

For standard player layouts, use the built-in `Container`.

## Safe outside Player

Returns `undefined` when called outside `Player`. Passing `undefined` to `ref` is harmless in React. Check the return value if your component needs to know whether it’s inside a player.

## API Reference

`useContainerAttach(): Dispatch<SetStateAction<HTMLElement | null>> | undefined`

### Return Value

| Type |
| --- |
| `Dispatch<SetStateAction<HTMLElement \| null>> \| undefined` |

---

React documentation: https://videojs.org/docs/framework/react/llms.txt
All documentation: https://videojs.org/llms.txt