A lightweight React list that supports alphabetical indexing.
const dataList = ['A'];
// If array of object is to be used
const dataList = [{ label: 'A' }];
const nameKey = 'label';<AlphabetList
data={dataList}
nameKey={nameKey}
itemRender={(item, index) => <div key={`item-${index}`}>{item.label}</div>}
sx={{}}
alphabetListSx={{}}
alphabetItemSx={{}}
/>| Props | Type | Description |
|---|---|---|
| data (required) | Array | An array of strings or objects. If it is an array of objects, you need to use nameKey |
| nameKey | String | Specifies the name key of item; returns undefined in a string array |
| itemRender (required) | Function | Takes each item sent from the data array, supporting custom rendering |
| sx | Object | Container style |
| alphabetListSx | Object | Style of the right-hand alphabetical list navigation container |
| alphabetItemSx | Object | Style of each letter in the alphabet list navigation |