Display

Thumbnail

This component is used to load and display thumbnail images.

INFO

See the loading thumbnails guide for how to prepare and load them.

API Reference

Root

HTMLAttributes<HTMLElement>

Ref<HTMLElement>

Used to load and display a preview thumbnail at the given time.

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

const Component = Thumbnail.Root;
type Props = Thumbnail.RootProps;import { Thumbnail } from "@vidstack/react";

const Component = Thumbnail.Root;
type Props = Thumbnail.RootProps; <Thumbnail.Root src="thumbnails.vtt" time={10} >
  <Thumbnail.Img />
</Thumbnail.Root> <Thumbnail.Root src="thumbnails.vtt" time={10} >
  <Thumbnail.Img />
</Thumbnail.Root> 

Props

Prop	Type	Default
`asChild`	`boolean`	`false`
`children`	`ReactNode`	`null`
`src`	`string`	`''`
`time`	`number`	`0`

Data Attributes

Name	Description
`data-loading`	Whether thumbnail image is loading.
`data-error`	Whether an error occurred loading thumbnail.
`data-hidden`	Whether thumbnail is not available or failed to load.

Img

HTMLAttributes

Ref<HTMLImageElement>

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

const Component = Thumbnail.Img;
type Props = Thumbnail.ImgProps;import { Thumbnail } from "@vidstack/react";

const Component = Thumbnail.Img;
type Props = Thumbnail.ImgProps; <Img /> <Img /> 

Props

Prop Type Default

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

`children`

ReactNode

null

`asChild`

boolean

false

Thumbnail

API Reference

Root

Props

`asChild`

`children`

`src`

`time`

Data Attributes

`data-loading`

`data-error`

`data-hidden`

Img

Props

`children`

`asChild`