Display

Controls

This component creates a container for control groups and controls when to show them.

API Reference

Root

HTMLAttributes

Ref<HTMLElement>

This component creates a container for control groups.

import { Controls } from "@vidstack/react";

const Component = Controls.Root;
type Props = Controls.RootProps; <Controls.Root>
  <Controls.Group></Controls.Group>
  <Controls.Group></Controls.Group>
<Controls.Root> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`
`children`	`ReactNode`	`null`
`hideDelay`	`number`	`2000`
`hideOnMouseLeave`	`boolean`	`false`

Callbacks

Callback	Type
`onChange`	`function`

Data Attributes

/* Example. */
.component[data-foo] {}

Name	Description
`data-visible`	Whether controls should be visible.
`data-pip`	Whether picture-in-picture mode is active.
`data-fullscreen`	Whether fullscreen mode is active.

Group

HTMLAttributes

Ref<HTMLElement>

This component creates a container for media controls.

import { Controls } from "@vidstack/react";

const Component = Controls.Group;
type Props = Controls.GroupProps; <Controls.Root>
  <Controls.Group></Controls.Group>
  <Controls.Group></Controls.Group>
<Controls.Root> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`
`children`	`ReactNode`	`null`

Controls

API Reference

Root

Props

`asChild`

`children`

`hideDelay`

`hideOnMouseLeave`

Callbacks

`onChange`

Data Attributes

`data-visible`

`data-pip`

`data-fullscreen`

Group

Props

`asChild`

`children`