indexed-section-list

A simple modular section list with an index.

Installation

npm install --save indexed-section-list

Usage

import react from 'React';
import IndexedSectionList from 'indexed-section-list';

// See all props options in https://github.com/kfiri/indexed-section-list#props
function App() {
  return (
    <IndexedSectionList
      items={countryItems}
      indexItemHeight={20}
      style={styles.sectionList}
      wrapperStyle={styles.wrapper}
      indexWrapperStyle={styles.indexWrapper}
      showsVerticalScrollIndicator={false}
    />
  );
}

Props

Inherits SectionList props (omits sections, keyExtractor and onScrollToIndexFailed).
For implementing keyExtractor, see getSectionProps below.

Name	Description	Type	Required
items	The items of the list, either strings or objects with titles.	(string | { title: string; key?: string | number; })[]	yes
indexItemHeight	The height if an item in the index list (must be a constant). defaults to 25px.	number	no
indexWrapperStyle	The style of the view that contains the index list.	ViewStyle	no
indexTextStyle	The style of the view that contains the index text.	TextStyle	no
scrollEfficiency	The method of the scroll (see Scroll Efficiency Functions). default is "revered".	"reversed" | "initial" | Function	no
scrollOnSelect	Should the section list scroll to an index when onSelectIndex is fired? (default true). Set to false if you want to manually scroll the section list using onSelectIndex.	boolean	no
titleKey	The title property name of the items. If the items are strings, this will be ignored.	string	no
uniqueKey	The unique key property name of the items. If the items are strings, this will be ignored.	string	no
wrapperStyle	The style of the view that contains both the section list and the index.	ViewStyle	no
Functional Props
onSelectIndex	A callback that is fired when the user selects an index.	Function	no
getSectionProps	A methods that returns a section's properties (see Section Properties). Any change in this prop would cause the whole component to rerender (React.useCallback is recommended).	Function	no

Ref

The ref prop behave exactly the same as the prop ref in SectionList props.

Scroll Efficiency Functions

Given the height of the index container and the height of the index list, return a number that resembles the correlation between the movement of the user's touch on the list and the scroll of the list.
Signature (containerHeight: number, listHeight: number) => number.

Built in methods-

reversed - Set the scroll of the indexes list to the opposite of the user's scroll direction, so when the user scroll from one edge of the container to the other, the list would complete a full scroll within the container in the opposite direction.

initial - The normal scroll. Scroll the indexes list with the user's scroll. simply returns 1.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT