A virtualized, keyboard-navigable listbox that lets you preview, select, and activate items while reporting the currently visible item as the user scrolls.
"use client";
import * as React from "react";
import { InteractiveItemList } from "@/components/ui/interactive-item-list";
type Contact = {
id: string;
name: string;
email: string;
};
const contacts: Contact[] = [
{ id: "1", name: "Ada Lovelace", email: "ada@example.com" },
{ id: "2", name: "Alan Turing", email: "alan@example.com" },
{ id: "3", name: "Grace Hopper", email: "grace@example.com" },
{ id: "4", name: "Margaret Hamilton", email: "margaret@example.com" },
{ id: "5", name: "Katherine Johnson", email: "katherine@example.com" },
{ id: "6", name: "Radia Perlman", email: "radia@example.com" },
{ id: "7", name: "Barbara Liskov", email: "barbara@example.com" },
{ id: "8", name: "Frances Allen", email: "frances@example.com" },
];
export default function InteractiveItemListDemo() {
const [selectedItemId, setSelectedItemId] = React.useState<string | null>(
contacts[0]?.id ?? null,
);
return (
<div className="bg-background text-foreground h-[420px] w-full max-w-sm rounded-lg border">
<InteractiveItemList
aria-label="Contacts"
items={contacts}
selectedItemId={selectedItemId}
onActivateItem={(item) => setSelectedItemId(item.id)}
renderItem={(item, state) => (
<div
className={
"rounded-md border p-3 text-sm transition-colors " +
(state.isSelected
? "border-primary bg-primary/10"
: "border-transparent hover:bg-muted")
}
>
<div className="font-medium">{item.name}</div>
<div className="text-muted-foreground">{item.email}</div>
</div>
)}
/>
</div>
);
}