createRowBackdropPlugin

One backdrop node per region in the grid's back scroll layer: behind every row, scrolling with them, and gliding with the rows when a row Y offset opens above or inside it

import { createRowBackdropPlugin } from "@roku-sdk/flex-grid/row-backdrop";

createRowBackdropPlugin<R extends RowBackdropRegion>(config: RowBackdropConfig<R>): InitGridPlugin<unknown>

Description

One backdrop node per region in the grid's back scroll layer: behind every row, scrolling with them, and gliding with the rows when a row Y offset opens above or inside it. Cards scroll over it horizontally.

List it before createFocusHighlightPlugin from @roku-sdk/flex-grid/focus-highlight so a highlight configured with layer: "back" draws over the backdrop.

Parameters

Name	Type	Description
`config`	`RowBackdropConfig<R>`

Return values

Returns InitGridPlugin<unknown>.

Example

import { createRowBackdropPlugin } from "@roku-sdk/flex-grid/row-backdrop";
createRowBackdropPlugin({
    regions: () => [{ rows: [4, 5], uri: brandArt() }],
    render: (region, size) => <poster ref={size.fill} loadDisplayMode="scaleToZoom" uri={region().uri} />
});

Types

RowBackdropRegion

Row Backdrop Region configuration and callbacks.

Name	Type	Description
`left?`	`number`	Left edge in the coordinates the grid's `translation` is given in. Defaults to the viewport's; 0 for full bleed.
`rows`	`readonly [number, number]`	First and last row, inclusive. Identifies the region: a new span is a new node.
`width?`	`number`	Region width. Defaults to the viewport's; the screen width for full bleed.

RowBackdropConfig

Row Backdrop Config configuration and callbacks.

Name	Type	Description
`above?`	`number`	Px the region reaches above its first row's cards. Defaults to the grid's title reserve.
`below?`	`number`	Px the region reaches below its last row's cards. Defaults to 0.
`regions`	`Accessor<readonly R[]>`	Non-overlapping regions. Reactive: a changed list adds, removes or updates region nodes.
`render`	`(region: Accessor<R>, size: RowBackdropSize) => Element`	Draws one region, with y = 0 at its top. Runs once per mount; the region's fields other than `rows` reach it through `region`, so a changed image URI is a prop update, not a remount.

RowBackdropSize

Row Backdrop Size configuration and callbacks.

Name	Type	Description
`fill`	`(node: unknown) => void`	Pass as `ref` to each node that spans the whole region, such as a `Poster` or `Rectangle`. The plugin owns that node's `id`, `width` and `height`, and glides its height with the rows. The node must live as long as the region: one rendered conditionally keeps its tween once removed.
`height`	`Accessor<number>`	Region height the rows are heading for; not tweened. Place content that must not stretch with it.
`width`	`Accessor<number>`	Region width.