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
