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>
)