Skip to content

beforesemicolon/flatlist-react

Repository files navigation

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.

Build GitHub npm GitHub release (latest by date)


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