Skip to content
Related Articles

Related Articles

Improve Article

How to use react-window Module in ReactJS?

  • Last Updated : 05 Mar, 2021

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :