flatlist-react

FlatList React

A helpful react utility component intended to simplify handling rendering list with ease. It can handle grouping, sorting, filtering, searching, sorting, paginating, styling with very simple props.

Dear React Native Developer

This is not intended for React-Native usage. Although some features will still work, others will just break your application. Use at your own risk.

Install

Make sure you are running react and react-dom version 16.8.0+.

npm install flatlist-react

How to use

Take in consideration the following list passed to component PeopleList:

// App.jsx
people = [
    {firstName: 'Elson', lastName: 'Correia', info: {age: 24}},
    {firstName: 'John', lastName: 'Doe', info: {age: 18}},
    {firstName: 'Jane', lastName: 'Doe', info: {age: 34}},
    {firstName: 'Maria', lastName: 'Carvalho', info: {age: 22}},
    {firstName: 'Kelly', lastName: 'Correia', info:{age: 23}},
    {firstName: 'Don', lastName: 'Quichote', info: {age: 39}},
    {firstName: 'Marcus', lastName: 'Correia', info: {age: 0}},
    {firstName: 'Bruno', lastName: 'Gonzales', info: {age: 25}},
    {firstName: 'Alonzo', lastName: 'Correia', info: {age: 44}}
  ]

  <PeopleList people={people}/>

Now inside your component file, we create a function renderPerson that will be passed to renderItem:

// PeopleList.jsx
import FlatList from 'flatlist-react';

...

renderPerson = (person, idx) => {
  return (
      <li key={idx}>
        <b>{person.firstName} {person.lastName}</b> (<span>{person.info.age}</span>)
      </li>
  );
}

...

return (
    <ul>
        <FlatList
          list={this.props.people}
          renderItem={this.renderPerson}
          renderWhenEmpty={() => <div>List is empty!</div>}
          sortBy={["firstName", {key: "lastName", descending: true}]}
          groupBy={person => person.info.age > 18 ? 'Over 18' : 'Under 18'}
        />
    </ul>
)

Full Documentation

Features	Props / Components
Rendering	list, renderItem, renderWhenEmpty, wrapperHtmlTag, limit, reversed
Render Optimization	renderOnScroll
Pagination (Infinite Scroll)	hasMoreItems, loadMoreItems, paginationLoadingIndicator, paginationLoadingIndicatorPosition
Filtering	filterBy
Searching	searchTerm, searchBy, searchOnEveryWord, searchMinCharactersCount, searchCaseInsensitive
Sorting	sortBy, sortCaseInsensitive, sortDescending
Grouping	groupOf, groupBy, groupSeparator, groupSeparatorAtTheBottom, groupReversed, groupSorted, groupSortedBy, groupSortedDescending, groupSortedCaseInsensitive
Styling	displayGrid, gridGap, minColumnWidth, displayRow, rowGap
scrollToTop	scrollToTopButton, scrollToTopOffset, scrollToTopPadding, scrollToTopPosition
Components	PlainList
Utilities	sortList, searchList, filterList, groupList, limitList