React Native Mantine › Navigation
TableOfContents
List of links to page sections with depth offsets
Import: import { TableOfContents } from 'react-native-mantine';
Usage
import { TableOfContents } from 'react-native-mantine';
const data = [
{ id: 'introduction', value: 'Introduction', depth: 1 },
{ id: 'installation', value: 'Installation', depth: 2 },
{ id: 'usage', value: 'Usage', depth: 3 },
];
// Uncontrolled
<TableOfContents data={data} defaultActive="introduction" />
// Controlled, scroll to the pressed section
<TableOfContents
data={data}
active={active}
onActiveChange={(id) => scrollToSection(id)}
variant="filled"
color="grape"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
data (required) | { id: string; value: ReactNode; depth: number }[] | Items to display | |
active | string | Controlled active item id | |
defaultActive | string | Initial active item id for uncontrolled usage | |
onActiveChange | (id: string) => void | Called with the item id when a control is pressed | |
variant | 'filled' | 'light' | 'none' | "light" | Variant of the active control |
color | MantineColor | Color of the active control | |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | "md" | Controls font size and padding |
radius | MantineNumberSize | "sm" | Border radius of controls |
minDepthToOffset | number | 1 | Depth level that is rendered without offset |
depthOffset | number | 20 | Offset in px applied for every depth level |
getControlProps | (payload: { active: boolean; data: TableOfContentsItem }) => Record<string, any> | Additional props passed down to every control |