yarn
yarn start
This is a skeleton for a virtualized list component. Highly influnced by react native's flat list
yarn add virtualized-list-skeleton
OR
npm install virtualized-list-skeleton
- data: array of the options to render in list
- renderItem: is a function to render an individual item from above list.
- keyExtractor: (optional) function to extract unique key from individual item from above list.
- defaultNumberofItems: (optional) number of items to show at the start, default is 10
In your app where you use this library make your own custom css and import it with these params to change the styling of the component
-
virtualized-list-container: the overall container of the component you can change width, background color, color and font size, make sure that you provide a fix height for this container.
-
virtualized-list-item: its optional as in render item you can style your individual child items.
import React from 'react';
import VirtualizedList from 'virtualized-list-skeleton';
const data = Array(10).fill(null).map((d, idx) => idx);
function App() {
return (
<VirtualizedList
data={data}
// returns individual item from the list you send
keyExtractor={(item) => item}
renderItem={(item) => {
return (
<div style={{ margin: '30px', background: 'lightgray' }}>
{item}
</div>
);
}}
/>
);
}
export default App;