Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

react-virtualized-sectionlist

Package Overview
Dependencies
1
Maintainers
1
Versions
5
Issues
File Explorer

Advanced tools

react-virtualized-sectionlist

React SectionList component based in react-virtualized List

    0.0.5latest

Version published
Maintainers
1
Yearly downloads
9,858
decreased by-32.42%

Weekly downloads

Readme

Source

react-virtualized-sectionlist

React SectionList component based in a wrapper around react-virtualized List.

npm version npm downloads npm licence

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

Installation

npm install react-virtualized-sectionlist --save yarn add react-virtualized-sectionlist

Example / Usage

This component mimic the same concepts, props and API from react-virtualized List component. If you need click here to get more info about.

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

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:

import React, { Component } from 'react'; import SectionList from 'react-virtualized-sectionlist'; const renderHeader = ({title, sectionIndex, key, style, isScrolling, isVisible, parent}) => { return ( <div key={key} className="list--header" style={style}> <h4>{title}</h4> </div> ); }; const renderRow = ({item, sectionIndex, rowIndex, key, style, isScrolling, isVisible, parent}) => { return ( <div key={key} className="list--item" style={style}> <p>{item}</p> </div> ); }; 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 ( <SectionList width={300} height={250} sections={sections} sectionHeaderRenderer={renderHeader} sectionHeaderHeight={ROW_HEIGHT} rowHeight={ROW_HEIGHT} rowRenderer={renderRow} />} ); }; // before that you can use your <MySectionList /> component everywhere you need...

License

MIT

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc