https://github.com/lucasferreira/react-virtualized-sectionlist

React SectionList component based in react-virtualized List
https://github.com/lucasferreira/react-virtualized-sectionlist

header list react react-components sectionlist virtualization

Last synced: about 1 year ago
JSON representation

React SectionList component based in react-virtualized List

• Host: GitHub
• URL: https://github.com/lucasferreira/react-virtualized-sectionlist
• Owner: lucasferreira
• License: mit
• Created: 2017-07-31T22:22:07.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2018-04-24T16:48:47.000Z (about 8 years ago)
• Last Synced: 2025-03-24T06:12:38.478Z (over 1 year ago)
• Topics: header, list, react, react-components, sectionlist, virtualization
• Language: JavaScript
• Homepage:
• Size: 22.5 KB
• Stars: 20
• Watchers: 1
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-virtualized-sectionlist

React SectionList component based in a wrapper around [react-virtualized](https://github.com/bvaughn/react-virtualized) List.

[![npm version](http://img.shields.io/npm/v/react-virtualized-sectionlist.svg?style=flat-square)](https://npmjs.org/package/react-virtualized-sectionlist "View this project on npm")

[![npm downloads](http://img.shields.io/npm/dm/react-virtualized-sectionlist.svg?style=flat-square)](https://npmjs.org/package/react-virtualized-sectionlist "View this project on npm")

[![npm licence](http://img.shields.io/npm/l/react-virtualized-sectionlist.svg?style=flat-square)](https://npmjs.org/package/react-virtualized-sectionlist "View this project on npm")

This component can be usefull to display large sets of grouped data with header line between groups.

### Installation

```bash

npm install react-virtualized-sectionlist --save

```

```bash

yarn add react-virtualized-sectionlist

```

## Example / Usage

This component mimic the same concepts, props and API from [react-virtualized](https://github.com/bvaughn/react-virtualized) List component. If you need [`click here`](https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md) to get more info about.

In order to use this component your *data* need be in this format-schema:

```javascript

const sections = [

  { title: 'Group 1', data: ['Item 1 of Group 1', 'Item 2 of Group 1', 'Item 3 of Group 1', ...] },

  { title: 'Group 2', data: ['Item 1 of Group 2', 'Item 2 of Group 2', 'Item 3 of Group 2', ...] },

  { title: 'Group 3', data: ['Item 1 of Group 3', 'Item 2 of Group 3', 'Item 3 of Group 3', ...] },

  ...

];

```

And to render your the SectionList:

```javascript

import React, { Component } from 'react';

import SectionList from 'react-virtualized-sectionlist';

const renderHeader = ({title, sectionIndex, key, style, isScrolling, isVisible, parent}) => {

  return (

    


      
{title}

    

  );

};


const renderRow = ({item, sectionIndex, rowIndex, key, style, isScrolling, isVisible, parent}) => {

  return (

    


      
{item}

    

  );

};


const ROW_HEIGHT = 30;

const sections = [

  { title: 'Group 1', data: ['Item 1 of Group 1', 'Item 2 of Group 1', 'Item 3 of Group 1'] },

  { title: 'Group 2', data: ['Item 1 of Group 2', 'Item 2 of Group 2', 'Item 3 of Group 2'] },

  { title: 'Group 3', data: ['Item 1 of Group 3', 'Item 2 of Group 3', 'Item 3 of Group 3'] },

];

const MySectionList = () => {

  return (

    }

  );

};

// before that you can use your  component everywhere you need...

```

## License

MIT