svipwrap-react-alphabet-list

A lightweight React list that supports alphabetical indexing.

Preview

Usage

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

| 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 |