@protonko/section-list v0.1.32

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.