React window works by only rendering part of a large data set. This module is very easy to integrate and reduces the amount of time which generally takes a while to render. This module avoids the over-allocation of DOM nodes. We can use the react-window module in ReactJS using the following approach.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command.
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd foldername
Step 3: After creating the ReactJS application, Install the material-ui and react-window modules using the following command.
npm install @material-ui/core npm install react-window
Project Structure: It will look like the following.
Project Structure
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
App.js
import React from "react"; import ListItem from "@material-ui/core/ListItem"; import ListItemText from "@material-ui/core/ListItemText"; import { FixedSizeList } from "react-window"; function renderOurRow(props) { const { index } = props; return ( <ListItem key={index} button> <ListItemText primary={`Sample Item ${index + 1}`} /> </ListItem> ); } export default function App() { return ( <div style={{ display: "block", padding: 30 }}> <h4>How to use react-window Module in ReactJS?</h4> <FixedSizeList height={250} width={300} itemSize={100} itemCount={5}> {renderOurRow} </FixedSizeList> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project.
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.
Reference: https://material-ui.com/components/lists/#virtualized-list
