OverflowList

Collapse items that do not fit into an overflow indicator

Import: import { OverflowList } from 'react-native-mantine';

Usage

import { OverflowList, Badge } from 'react-native-mantine';

const technologies = ['React', 'React Native', 'TypeScript'];

<OverflowList
  data={technologies}
  getItemKey={(item) => item}
  renderItem={(item) => (
    <Badge size="sm" variant="light">{item}</Badge>
  )}
  renderOverflow={(hiddenItems) => (
    <Badge size="sm" variant="outline">
      +{hiddenItems.length} more
    </Badge>
  )}
  maxVisibleItems={5}
  collapseFrom="end"
  gap="xs"
/>

Props

Prop	Type	Default	Description
`data` (required)	`T[]`		Items to render
`renderItem` (required)	`(item: T, index: number) => React.ReactNode`		Renders a single item
`renderOverflow`	`(hiddenItems: T[]) => React.ReactNode`		Renders the overflow indicator, receives hidden items, defaults to a +N label
`maxVisibleItems`	`number`		Maximum number of visible items regardless of available space
`gap`	`MantineNumberSize`	`"xs"`	Key of theme.spacing or number, gap between items
`collapseFrom`	`'start' \| 'end'`	`"end"`	Side from which items are collapsed when there is not enough space
`getItemKey`	`(item: T, index: number) => string \| number`		Returns a unique key for the given item
`style`	`ViewStyle`		Additional styles to apply to the root element

Source on GitHub · npm