TargetGroup

TargetGroup creates scrolling lists (or rows) of items where each item's size and position is defined by rectangular target regions in a TargetSet

import { TargetGroup } from "@roku-sdk/components";

TargetGroup(props: ITargetGroupProps): JSX.Element

Description

TargetGroup creates scrolling lists (or rows) of items where each item's size and position is defined by rectangular target regions in a TargetSet. The focused item typically occupies a larger region than unfocused items, with smooth animations between states.

Common use cases:

A full-screen vertical list where the focused item is larger
A list that collapses when unfocused and expands when focused,
using two TargetSets animated via animateToTargetSet
A horizontal row with a floating focus region
A circular arrangement with fixed positions

Parameters

Name	Type	Description
`props`	ITargetGroupProps

Example

import "./compiled-components/MyItem.xml";

<targetGroup
    itemComponentName="MyItem"
    targetSet={
        <targetSet
            targetRects={[
                [0, -200, 1920, 200],
                [0, 20, 1920, 200],
                [0, 240, 1920, 400],
                [0, 660, 1920, 200],
                [0, 880, 1920, 200],
            ]}
            focusIndex={2}
        />
    }
    content={
        <contentNode>
            <contentNode title="Item 1" description="First item" />
            <contentNode title="Item 2" description="Second item" />
            <contentNode title="Item 3" description="Third item" />
        </contentNode>
    }
    duration={0.4}
    wrap={true}
    onItemFocused={(index) => console.log("Focused:", index)}
    onItemSelected={(index) => console.log("Selected:", index)}
/>

Description

Parameters

Example

What’s Next