{"id":18535561,"url":"https://github.com/beforesemicolon/flatlist-react","last_synced_at":"2025-04-06T22:10:18.122Z","repository":{"id":40614297,"uuid":"200127740","full_name":"beforesemicolon/flatlist-react","owner":"beforesemicolon","description":"A helpful utility component to handle lists in react like a champ","archived":false,"fork":false,"pushed_at":"2024-06-19T00:18:06.000Z","size":2172,"stargazers_count":96,"open_issues_count":8,"forks_count":18,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-30T20:12:58.881Z","etag":null,"topics":["display-grid","filtering","flatlist-react","grouping","infinite-scroll","javascript","list","paginated-list","react","react-flatlist","render-scroll","reverse","scroll-to-top","searching","sorting","styled-list","typescript","utility-tool"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beforesemicolon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["beforesemicolon"]}},"created_at":"2019-08-01T22:41:59.000Z","updated_at":"2025-02-11T01:16:18.000Z","dependencies_parsed_at":"2023-02-08T07:15:56.736Z","dependency_job_id":"408c7fc0-ea0d-41c4-8631-f0682759fd56","html_url":"https://github.com/beforesemicolon/flatlist-react","commit_stats":{"total_commits":311,"total_committers":4,"mean_commits":77.75,"dds":"0.20578778135048237","last_synced_commit":"9cb7ba874299d992aaca374ae0e933052e48198a"},"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fflatlist-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fflatlist-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fflatlist-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beforesemicolon%2Fflatlist-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beforesemicolon","download_url":"https://codeload.github.com/beforesemicolon/flatlist-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247557767,"owners_count":20958047,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["display-grid","filtering","flatlist-react","grouping","infinite-scroll","javascript","list","paginated-list","react","react-flatlist","render-scroll","reverse","scroll-to-top","searching","sorting","styled-list","typescript","utility-tool"],"created_at":"2024-11-06T19:25:23.129Z","updated_at":"2025-04-06T22:10:18.095Z","avatar_url":"https://github.com/beforesemicolon.png","language":"TypeScript","funding_links":["https://github.com/sponsors/beforesemicolon"],"categories":[],"sub_categories":[],"readme":"\u003ch1\nstyle=\"\ncolor: #666;\nbackground-color: #f2f2f2;\npadding: 10px 20px;\n\"\u003e\nFlatList React\n\u003c/h1\u003e\n\nA helpful react utility component intended to simplify handling rendering list with ease.\nIt can handle `grouping`, `sorting`, `filtering`, `searching`, `sorting`, `paginating`, `styling` with very simple props.\n\n[![Build](https://github.com/beforesemicolon/flatlist-react/workflows/Node.js%20CI/badge.svg)](https://github.com/beforesemicolon/flatlist-react/actions)\n[![GitHub](https://img.shields.io/github/license/beforesemicolon/flatlist-react)](https://github.com/beforesemicolon/flatlist-react/blob/master/LICENSE)\n[![npm](https://img.shields.io/npm/v/flatlist-react)](https://www.npmjs.com/package/flatlist-react)\n[![GitHub release (latest by date)](https://img.shields.io/github/v/release/beforesemicolon/flatlist-react)](https://www.npmjs.com/package/flatlist-react)\n\n---\n\n###### Dear React Native Developer\nThis is not intended for React-Native usage. Although some features will still work, others will just break your application. Use at your own risk.\n\n### Install\n\nMake sure you are running **react** and **react-dom** version **16.8.0+**.\n\n```npm install flatlist-react```\n\n### How to use\n\nTake in consideration the following list passed to component `PeopleList`:\n\n```ts\n// App.jsx\npeople = [\n    {firstName: 'Elson', lastName: 'Correia', info: {age: 24}},\n    {firstName: 'John', lastName: 'Doe', info: {age: 18}},\n    {firstName: 'Jane', lastName: 'Doe', info: {age: 34}},\n    {firstName: 'Maria', lastName: 'Carvalho', info: {age: 22}},\n    {firstName: 'Kelly', lastName: 'Correia', info:{age: 23}},\n    {firstName: 'Don', lastName: 'Quichote', info: {age: 39}},\n    {firstName: 'Marcus', lastName: 'Correia', info: {age: 0}},\n    {firstName: 'Bruno', lastName: 'Gonzales', info: {age: 25}},\n    {firstName: 'Alonzo', lastName: 'Correia', info: {age: 44}}\n  ]\n\n  \u003cPeopleList people={people}/\u003e\n```\n\nNow inside your component file, we create a function `renderPerson` that will be passed to `renderItem`:\n\n```tsx\n// PeopleList.jsx\nimport FlatList from 'flatlist-react';\n\n...\n\nrenderPerson = (person, idx) =\u003e {\n  return (\n      \u003cli key={idx}\u003e\n        \u003cb\u003e{person.firstName} {person.lastName}\u003c/b\u003e (\u003cspan\u003e{person.info.age}\u003c/span\u003e)\n      \u003c/li\u003e\n  );\n}\n\n...\n\nreturn (\n    \u003cul\u003e\n        \u003cFlatList\n          list={this.props.people}\n          renderItem={this.renderPerson}\n          renderWhenEmpty={() =\u003e \u003cdiv\u003eList is empty!\u003c/div\u003e}\n          sortBy={[\"firstName\", {key: \"lastName\", descending: true}]}\n          groupBy={person =\u003e person.info.age \u003e 18 ? 'Over 18' : 'Under 18'}\n        /\u003e\n    \u003c/ul\u003e\n)\n```\n### Full Documentation\n\n| Features                                                                                                                      | Props / Components                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |\n|:------------------------------------------------------------------------------------------------------------------------------|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| [Rendering](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#rendering)                     | [list](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#list-and-renderitem), [renderItem](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#list-and-renderitem), [renderWhenEmpty](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#renderwhenempty), [wrapperHtmlTag](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#wrapperhtmltag), [limit](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#limit), [reversed](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#reversed)                                                                                                                                                                                                                                                                                                                                                                                                                      |\n| [Render Optimization](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#render-optimization) | [renderOnScroll](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#renderonscroll)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |\n| [Pagination (Infinite Scroll)](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#pagination) | [hasMoreItems](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#hasmoreitems), [loadMoreItems](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#loadmoreitems), [paginationLoadingIndicator](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#paginationloadingindicator), [paginationLoadingIndicatorPosition](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#paginationloadingindicatorposition)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |\n| [Filtering](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#filtering)                     | [filterBy](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#filterby)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |\n| [Searching](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#searching)                     | [searchTerm](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#searchterm), [searchBy](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#searchby), [searchOnEveryWord](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#searchoneveryword), [searchMinCharactersCount](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#searchmincharacterscount), [searchCaseInsensitive](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#searchcaseinsensitive)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |\n| [Sorting](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#sorting)                         | [sortBy](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#sortby), [sortCaseInsensitive](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#sortcaseinsensitive), [sortDescending](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#sortdescending)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |\n| [Grouping](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#grouping)                       | [groupOf](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#groupof), [groupBy](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#groupby), [groupSeparator](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#groupseparator), [groupSeparatorAtTheBottom](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#groupseparatoratthebottom), [groupReversed](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#groupreversed), [groupSorted](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#groupsorted), [groupSortedBy](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#groupsortedby), [groupSortedDescending](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#groupsorteddescending), [groupSortedCaseInsensitive](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#groupsortedcaseinsensitive) |\n| [Styling](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#styling)                         | [displayGrid](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#displaygrid), [gridGap](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#gridgap), [minColumnWidth](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#mincolumnwidth), [displayRow](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#displayrow), [rowGap](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#rowgap)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |\n| [scrollToTop](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#scrolltotop)                 | [scrollToTopButton](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#scrolltotopbutton), [scrollToTopOffset](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#scrolltotopoffset), [scrollToTopPadding](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#scrolltotoppadding), [scrollToTopPosition](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#scrolltotopposition)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |\n| [Components](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#components)                   | [PlainList](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#plainlist)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |\n| [Utilities](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#utilities)                     | [sortList](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#sortlist), [searchList](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#searchlist), [filterList](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#filterlist), [groupList](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#grouplist), [limitList](https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#limitlist)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeforesemicolon%2Fflatlist-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeforesemicolon%2Fflatlist-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeforesemicolon%2Fflatlist-react/lists"}