SectionList

Component for rendering sectioned lists for plain React.
Created by analogy with React Native SectionList.

Demo
Code example

Installation

The package can be installed via npm:

npm install @protonko/section-list

Or via yarn:

yarn add @protonko/section-list

You’ll need to install react and react-dom separately since those dependencies aren’t included in the package.

Support

• React 17.0.0 or newer

Usage

import React from 'react';
import {Section, SectionList} from '@protonko/section-list'

interface ExampleData {
  id: number,
  title: string,
  description: string,
  // ...any attributes
}

const sections: Section<ExampleData> = [{
  title: 'Section 1',
  data: [{id: 1, title: 'title 1', description: 'descr'}]
}]

const Example = () => {
  const keyExtractor = (item: ExampleData) => item.id
  
  const renderItem = (elem: ExampleData) => (
    <article>
      <h2>{elem.title}</h2>
      <p>{elem.description}</h2>
    </article>
  )
  
  return (
    <SectionList<ExampleData>
      keyExtractor={keyExtractor}
      renderItem={renderItem}
      sections={sections}
    />
  )
}

Props

The component expects a generic-type T that describes section data.

Name	Description	Type	Required
keyExtractor	Used to extract a unique key for a given item at the specified index.	(item: T, index: number) => string	yes
renderItem	Default renderer for every item in every section.	(value: T, index: number, array: T[]) => ReactNode,	yes
sections	The actual data to render.	{title: string, data: T[]}[]	yes
className	Used to override a component's styles using custom classes.	string	no
onEndReached	Called once when the scroll position gets within onEndReachedThreshold of the rendered content.	() => void	no
onEndReachedThreshold	How far from the end the bottom edge of the list must be from the end of the content to trigger the onEndReached callback.	number	no
renderSectionHeader	Rendered at the top of each section.	(section: {title: string, data: T[]}) => ReactNode	no
shouldLoadData	Indicated whether to create an IntersectionObserver.	boolean	no
ListEmptyComponent	Rendered when the list is empty.	ReactElement	no
ListFooterComponent	Rendered at the very end of the list.	ReactElement	no