createBobPlugin
Create a bob-in-the-middle plugin
import { createBobPlugin } from "@roku-sdk/flex-grid/bob-in-the-middle";createBobPlugin<T>(config: BobConfig<T>): InitGridPlugin<T>Description
Create a bob-in-the-middle plugin. Pass the returned object in FlexGridConfig.plugins.
Parameters
| Name | Type | Description |
|---|---|---|
config | BobConfig<T> |
Return values
Returns InitGridPlugin<T>.
Example
import { createBobPlugin } from "@roku-sdk/flex-grid/bob-in-the-middle";
createBobPlugin({ height: 120, render: ctx => <label text={String(ctx.item())} /> });Types
BobConfig
Bob Config configuration and callbacks.
| Name | Type | Description |
|---|---|---|
height | number | Total vertical height (px) the bob occupies below the focused row's cards; the full space reserved for it, including any clearance the content needs. The focused row dynamically reserves this much gap (tweened open on focus, collapsed while a vertical smooth scroll glides), so rows sit tightly packed and only spread apart for the focused bob. |
placement? | "above" | "below" | "below" (default) sits under the focused row's cards; "above" sits over them, pushing the focused row's cards down by height as well as the rows beneath it. |
render | (ctx: { focusedCol: Accessor<number>; focusedRow: Accessor<number>; item: Accessor<T | undefined> }) => Element | Render the bob content. All provided accessors are reactive; read them inside JSX props, createEffect, or createMemo. Never destructure at the top level. |
Updated about 3 hours ago
What’s Next
Did this page help you?