# useContainer

Hook to access the media container from the nearest Player

`useContainer` returns the `MediaContainer` registered with the nearest `Player`. It returns `null` until the container mounts, or whenever that player has no registered container.

## Import

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

## Usage

Call `useContainer` from a component rendered inside `Player`:

**ContainerStatus.tsx**

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

export function ContainerStatus() {
  const container = useContainer();

  return <output>{container ? "Player container ready" : "Mounting container"}</output>;
}
```

Calling this hook outside `Player` throws because it reads through `usePlayerContext`. If a component can also work outside a player, use [`useOptionalContainer`](https://videojs.org/docs/framework/react/reference/api/use-optional-container) instead.

`useContainer` reads the registered container. [`useContainerAttach`](https://videojs.org/docs/framework/react/reference/api/use-container-attach) returns the setter used to register a custom container and is only needed when replacing the built-in `Container`.

## API Reference

`useContainer(): MediaContainer | null`

### Return Value

`MediaContainer | null`

---

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