taofeeq-deru / alphabet-list

The Alphabet-List For React

React-Alphabet-List(in-Dev)

¶Demo

Alphabet-List-Demo On CodeSandBox

¶Props

Props	Type	Description
data (required)	Array	An array of strings or objects. When it's an array of object, specify the name key of item in nameKey
nameKey	String	A string that tells the name key of one item, undefined if data is string array
style	Object	A style object. Styles for the container
alphabetListStyle	Object	A style object. Styles for the container of the alphabet list navigation on the right.
alphabetItemStyle	Object	A style object. Styles for each alphabet in the alphabet list navigation
generateFn (required)	Function	A function that takes each item sent in the data array and returns the html to display

¶Usage

const data = ["anything"];

if array of object is to be used

const data = [{ name: "anything" }];
const nameKey = "name";

<AlphabetList
  data={data}
  nameKey={nameKey}
  style={{}}
  alphabetListStyle={{}}
  alphabetItemStyle={{}}
  generateFn={(item, index) => {
    return <div key={item}>{item}</div>;
  }}
/>

---

This Project is Under The MIT License