react-window-reversed

(react-window with reversed support)

For the original repo, please check out https://github.com/bvaughn/react-window

React components for efficiently rendering large lists and tabular data

Install

# Yarn
yarn add react-window-reversed

# NPM
npm install --save react-window-reversed

Usage

Learn more at react-window-reversed.now.sh.

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:

1. Use react-virtualized. (It's still widely used by a lot of successful projects!)
2. 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.}

License

MIT © bvaughn

Changelog

1.2.4

• 🐛 Added Flow annotations to memoized methods to avoid a Flow warning for newer versions of Flow

1.2.3

• 🐛 Relaxed children validation checks. They were too strict and didn't support new React APIs like memo.

1.2.2

• 🐛 Improved Flow types for class component item renderers - (nicholas-l - #77)

1.2.1

• 🎉 Improved Flow types to include optional itemData parameter. (TrySound - #66)
• 🐛 VariableSizeList and VariableSizeGrid no longer call size getter functions with invalid index when item count is zero.

1.2.0

• 🎉 Flow types added to NPM package. (TrySound - #40)
• 🎉 Relaxed grid scrollTo method to make scrollLeft and scrollTop params optional (so you can only update one axis if desired). - #63)
• 🐛 Fixed invalid this pointer in VariableSizeGrid that broke the resetAfter* methods - #58)
• Upgraded to babel 7 and used shared runtime helpers to reduce package size slightly. (TrySound - #48)
• Remove overflow:hidden from inner container (souporserious - #56)

1.1.2

• 🐛 Fixed edge case scrollToItem bug that caused lists/grids with very few items to have negative scroll offsets.

1.1.1

• 🐛 FixedSizeGrid and FixedSizeList automatically clear style cache when item size props change.

1.1.0

• 🎉 Use explicit constructor and super to generate cleaner component code. (Andarist - #26)
• 🎉 Add optional shouldForceUpdate param reset-index methods to specify forceUpdate behavior. (nihgwu - #32)

1.0.3

• 🐛 Avoid unnecessary scrollbars for lists (e.g. no horizontal scrollbar for a vertical list) unless content requires them.

1.0.2

• 🎉 Enable Babel annotate-pure-calls option so that classes compiled by "transform-es2015-classes" are annotated with #__PURE__. This enables UglifyJS to remove them if they are not referenced, improving dead code elimination in application code. (Andarist - #20)
• 🎉 Update "rollup-plugin-peer-deps-external" and use new includeDependencies flag so that the "memoize-one" dependency does not get inlined into the Rollup bundle. (Andarist - #19)
• 🎉 Enable Babel "loose" mode to reduce package size (-8%). (Andarist - #18)

1.0.1

Updated README.md file to remove @alpha tag from NPM installation instructions.

1.0.0

Initial release of library. Includes the following components:

• FixedSizeGrid
• FixedSizeList
• VariableSizeGrid
• VariableSizeList