react-window

WebJar for react-window

License	License MIT
Categories	Categories React User Interface Web Frameworks
GroupId	GroupId org.webjars.npm
ArtifactId	ArtifactId react-window
Last Version	Last Version 1.8.5
Release Date	Release Date Aug 21, 2020
Type	Type jar
Description	Description react-window WebJar for react-window
Project URL	Project URL https://www.webjars.org
Source Code Management	Source Code Management https://github.com/bvaughn/react-window

Download react-window

Filename	Size
react-window-1.8.5.pom
react-window-1.8.5.jar	202 KB
react-window-1.8.5-sources.jar	22 bytes
react-window-1.8.5-javadoc.jar	22 bytes
Browse

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-window/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-window</artifactId>
    <version>1.8.5</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/react-window/
implementation 'org.webjars.npm:react-window:1.8.5'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/react-window/
implementation ("org.webjars.npm:react-window:1.8.5")

Apache Buildr

'org.webjars.npm:react-window:jar:1.8.5'

Apache Ivy

<dependency org="org.webjars.npm" name="react-window" rev="1.8.5">
  <artifact name="react-window" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='react-window', version='1.8.5')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "react-window" % "1.8.5"

Leiningen

[org.webjars.npm/react-window "1.8.5"]

Dependencies

compile (2)

Group / Artifact	Type	Version
org.webjars.npm : babel__runtime	jar	[7.0.0,8)
org.webjars.npm : memoize-one	jar	[3.1.1,6)

Project Modules

There are no modules declared in this project.

react-window

React components for efficiently rendering large lists and tabular data

React window works by only rendering part of a large data set (just enough to fill the viewport). This helps address some common performance bottlenecks:

It reduces the amount of work (and time) required to render the initial view and to process updates.
It reduces the memory footprint by avoiding over-allocation of DOM nodes.

Install

# Yarn
yarn add react-window

# NPM
npm install --save react-window

Usage

Learn more at react-window.now.sh:

Related libraries

react-virtualized-auto-sizer: HOC that grows to fit all of the available space and passes the width and height values to its child.
react-window-infinite-loader: Helps break large data sets down into chunks that can be just-in-time loaded as they are scrolled into view. It can also be used to create infinite loading lists (e.g. Facebook or Twitter).
react-vtree: Lightweight and flexible solution to render large tree structures (e.g., file system).

Frequently asked questions

How is `react-window` different from `react-virtualized`?

I wrote react-virtualized several years ago. At the time, I was new to both React and the concept of windowing. Because of this, I made a few API decisions that I later came to regret. One of these was adding too many non-essential features and components. Once you add something to an open source project, removing it is pretty painful for users.

react-window is a complete rewrite of react-virtualized. I didn't try to solve as many problems or support as many use cases. Instead I focused on making the package smaller¹ and faster. I also put a lot of thought into making the API (and documentation) as beginner-friendly as possible (with the caveat that windowing is still kind of an advanced use case).

If react-window provides the functionality your project needs, I would strongly recommend using it instead of react-virtualized. However if you need features that only react-virtualized provides, you have two options:

Use react-virtualized. (It's still widely used by a lot of successful projects!)
Create a component that decorates one of the react-window primitives and adds the functionality you need. You may even want to release this component to NPM (as its own, standalone package)! 🙂

^{1 - Adding a react-virtualized list to a CRA project increases the (gzipped) build size by ~33.5 KB. Adding a react-window list to a CRA project increases the (gzipped) build size by <2 KB.}

Can a list or a grid fill 100% the width or height of a page?

Yes. I recommend using the react-virtualized-auto-sizer package:

Here's a Code Sandbox demo.

Why is my list blank when I scroll?

If your list looks something like this...

...then you probably forgot to use the style parameter! Libraries like react-window work by absolutely positioning the list items (via an inline style), so don't forget to attach it to the DOM element you render!