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