OverflowList
Items are measured offscreen before the list is shown. The overflow item receives the hidden entries.
Source
LLM docs
Package
Examples
5
Properties
36
Basics
Entries beyond the available width collapse into a single item.
Loading demo…
import { Badge, Block, OverflowList } from '@plocks/ui';
const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
export function Demo() {
return (
<Block fullWidth>
<OverflowList
maw={320}
data={data}
renderItem={(item) => <Badge>{item}</Badge>}
renderOverflow={(hidden) => <Badge>+{hidden.length} more</Badge>}
/>
</Block>
);
}Multiple Rows
maxRows lets entries wrap before collapsing.Loading demo…
import { Badge, Block, OverflowList } from '@plocks/ui';
const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry', 'Fig', 'Grape'];
export function Demo() {
return (
<Block fullWidth>
<OverflowList
maw={320}
data={data}
maxRows={2}
renderItem={(item) => <Badge>{item}</Badge>}
renderOverflow={(hidden) => <Badge>+{hidden.length} more</Badge>}
/>
</Block>
);
}Collapse From Start
collapseFrom="start" keeps the last entries visible, as in breadcrumbs.Loading demo…
import { Badge, Block, OverflowList } from '@plocks/ui';
const data = ['Home', 'Library', 'Projects', 'Design', 'Components', 'Current'];
export function Demo() {
return (
<Block fullWidth>
<OverflowList
maw={320}
data={data}
collapseFrom="start"
renderItem={(item) => <Badge>{item}</Badge>}
renderOverflow={(hidden) => <Badge>+{hidden.length} more</Badge>}
/>
</Block>
);
}Max Visible Items
maxVisibleItems limits the count even when space remains.Loading demo…
import { Badge, Block, OverflowList } from '@plocks/ui';
const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
export function Demo() {
return (
<Block fullWidth>
<OverflowList
data={data}
maxVisibleItems={3}
renderItem={(item) => <Badge>{item}</Badge>}
renderOverflow={(hidden) => <Badge>+{hidden.length} more</Badge>}
/>
</Block>
);
}Overflow Details
The overflow item can reveal hidden entries in a HoverCard.
Loading demo…
import { Badge, Block, HoverCard, OverflowList, Text } from '@plocks/ui';
const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
export function Demo() {
return (
<Block fullWidth>
<OverflowList
maw={280}
data={data}
renderItem={(item) => <Badge>{item}</Badge>}
renderOverflow={(hidden) => (
<HoverCard target={<Badge>+{hidden.length} more</Badge>}>
{hidden.map((item) => (
<Text key={item}>{item}</Text>
))}
</HoverCard>
)}
/>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources