1.0.2 • Published 6 years ago

react-sliced-list v1.0.2

Weekly downloads
1
License
ISC
Repository
github
Last release
6 years ago

Optimizing rendering performace for a long list

Render only partial items from your long list for better performace

Render 20,000 rows with mouse hover event

Using the component

Screenshot

Without ( slow on even changing row background )

Screenshot

ParametersTypeDescriptionRequired
totalRowsNumberTotal number of rows we want to renderYes
rowHeightNumberHeight of each rowYes
childrenReact elementsList of React elements we want to renderYes
listStyleObjectOptional style object for list wrapperNo

This example shows how to use the component. We get start and end values via children. use these values to slice your list.

function App() {
  const arr = Array(20000);
  for (let i = 0; i < 20000; i++) {
    arr[i] = i;
  }

  const getRows = (start, end) => {
    const slice = arr.slice(start, end);
    return slice.map((num) => {
      return <Row number={num} />
    })
  }

  return (
    <div className="App">
      <SlicedList
        listStyle={{ height: '400px', width: '400px' }}
        totalRows={20000}
        rowHeight={40}>
        {(start, end) => {
          return getRows(start, end)
        }}
      </SlicedList>
    </div>
  );
}