High Performance list
npm install supercharged-listA High Performance List for React Applications.
A memoized component which means that it will not re-render if props remain shallow-equal. But here come a twist, if the prop in list is an object and its content remain same, then also it will re-render as it will not remain shallow-equal due to different memory assigned to objects. So here comes the supercharged-list to overcome this situation. In this it will perform the diff checker of the previous and next props object. It will render only if there is diffrence in the content of object. This will not re-render the entire list with props as object.
1. Default Behaviour: Entire List to be rendered in one go. (autoLoad=false && loadOnScroll=false)
2. The List items rendered in batches automatically. (autoLoad=true)
3. The List Items rendered in batches on scrolling. (loadOnScroll=true)
1. Diff checker to render only those list items whose props is changed.
2. Can scroll to a particular List Item in the List to be rendered.
With npm:
``bash`
npm install --save supercharged-list
or with yarn:
`bash`
yarn add supercharged-list
| Prop | Type | Description | Default | Required |
| --- | --- | --- | --- | --- |
| data | array | Data to be rendered in the list | null | Required |renderItem
| | function that return a JSX element | Template of a row in supercharged-list | null | Required |itemKey
| | String if data is array of object | To assign React key to each List Item | "id" | Required if data is array of object |autoLoad
| | boolean | To render List in batches automatically | false | Optional |batchCount
| | number | Number of List Items to be rendered in one batch | 50 | Required if autoLoad or loadOnScroll is true |loadOnScroll
| | boolean | To render List in batches on scroll | false | Optional |scrollParent
| | selector | View Port in which the List is scrolled | window | Required if loadOnScroll is true |isTabular
| | boolean | Used to create an extra html tag for reference to each List Item.positionToScroll
It should be true if List Item is a table row of Table.
If isTabular is true, "tr" tag is used for reference else "span" tag is used. | false | Required |
| | Number | Array Index of List Item to be scrolled to in data to be rendered | null | Optional |onScrollToElementEnd
| | function | Function to be called after scrolled to particular List Item | empty function | Optional |
Here is a basic usage:
`jsx
import React from "react";
import FlatList from "supercharged-list";
const usersData = [
{ id: 1, name: "xyz", age: 12 },
{ id: 2, name: "abc", age: 24 },
{ id: 3, name: "pqr", age: 18 },
{ id: 4, name: "klm", age: 35 }
];
class Example extends React.Component {
constructor(props) {
super(props);
this.renderItem = this.renderItem.bind(this);
}
renderItem(item) {
return
}
render() {
return (