1.1.3 • Published 2 years ago
pd_react-native-flatlist-alphabet v1.1.3
A simple React Native component that takes an array of data and renders a SectionList with alphabetically sorted data remake from CofferHub.
This package_uses the array of objects data-structure.
const data = [{...}, {...}, {...}, ...]
For react-native-flatlist-alphabet, the data does not need to be pre-formatted and sorted before use. The component handles all this logic internally.
Installation
Using npm:
npm install pd_react-native-section-alphabet
or with yarn:
yarn add pd_react-native-section-alphabet
Usage
Import the module
import AlphabetList from "react-native-flatlist-alphabet";
Use the component
<AlphabetList
data={YourData}
renderItem={YourRenderItemFunction}
renderSectionHeader={YourRenderSectionHeaderFunction}
getItemHeight={YourItemHeight}
sectionHeaderHeight={YourHeaderHeight}
indexLetterColor={ColorOfTheIndexSidebarLetters}
onPressLetter={(index) => {
// Do something when a letter is pressed
}}
/>
YourData
should be provided as an Array of objects, with each object item having both a value
and a key
.
const YourData = [
{
value: string, // determines which alphabet section to place the object in
key: string // used as the key in the keyExtractor for SectionList
... // your other properties
},
...
]
Props
Option | Description | Default |
---|---|---|
sectionData | The array of objects data with value and key. | - |
renderItem | Render the alphabet letter header. | JSX |
renderSectionHeader | Render the alphabet letter header. | JSX |
indexLetterColor | The alphabet letter font-size. | #0B3277 |
indexLetterSize | The alphabet letter font-size. | 16 |
letterIndexWidth | The alphabet letter index width size. | #0B3277 |
sectionHeaderHeight | The section header defines each alphabet title header size. | 40 |
getItemHeight | Returns the each item height position size. | 30 |
letterItemStyle | The container letter item style. | - |
containerStyle | The alphabet wrapper container style. | - |
alphabetContainer | The flatlist alphabet container style. | - |
style | The sectionlist container style. | - |
onPressLetter | The call back on letter press. | - |
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update the tests as appropriate.