# react-window-dynamic-fork
This fork of [`react-window`](https://github.com/bvaughn/react-window/) is published from [`issues/6 @ bc9192b`](https://github.com/bvaughn/react-window/commit/bc9192bb258aff64ab643cb90e1f0ee55a955815). I am publishing this fork in order to make the DynamicSizeList code available on npm, as installing directly from GitHub misbehaves in some CI/CD build environments. My only actual modification is the `check-for-update.js` file which runs on `build`. This is the full code of that file below; its only purpose is to check whether `1.9.0` (including an alpha version) has been published, exiting the process if it has.
```javascript
const npmApi = require('npm-api');
const semver = require('semver');
const process = require('process');
const npm = new npmApi();
const reactWindow = npm.repo('react-window');
reactWindow.package().then((pkgJson) => {
let version = pkgJson.version;
if (semver.satisfies(semver.coerce(version), '>=1.9.0')) {
throw new Error(`react-window ${version} has been released, please uninstall this fork and reinstall react-window.`);
} else {
console.log(`\nMost recent react-window version is ${version}, DynamicSizeList not yet available on npm.`);
console.log('This fork package will inform you when react-window @ 1.9.0 is available. \n')
}
}).catch((err) => {
console.log(`\n${err}\n`);
process.exit(1)
});
```
# react-window
> React components for efficiently rendering large lists and tabular data
[](https://yarnpkg.com/en/package/react-window) [](https://travis-ci.org/bvaughn/react-window) [](LICENSE.md)
## Install
```bash
# Yarn
yarn add react-window
# NPM
npm install --save react-window
```
## Usage
Learn more at [react-window.now.sh](https://react-window.now.sh/):
## Related libraries
* [`react-virtualized-auto-sizer`](https://npmjs.com/package/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`](https://npmjs.com/package/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).
## 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**1 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.
### 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](https://npmjs.com/package/react-virtualized-auto-sizer):
Here's a [Code Sandbox demo](https://codesandbox.io/s/3vnx878jk5).
### 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!
### Can I lazy load data for my list?
Yes. I recommend using the [`react-window-infinite-loader` package](https://npmjs.com/package/react-window-infinite-loader):
Here's a [Code Sandbox demo](https://codesandbox.io/s/5wqo7z2np4).
### Can I attach custom properties or event handlers?
Yes, using the `outerElementType` prop.
Here's a [Code Sandbox demo](https://codesandbox.io/s/4zqx79nww0).
### Can I add padding to the top and bottom of a list?
Yes, although it requires a bit of inline styling.
Here's a [Code Sandbox demo](https://codesandbox.io/s/react-window-list-padding-dg0pq).
### Can I add gutter or padding between items?
Yes, although it requires a bit of inline styling.
Here's a [Code Sandbox demo](https://codesandbox.io/s/2w8wmlm89p).
### Does this library support "sticky" items?
Yes, although it requires a small amount of user code. Here's a [Code Sandbox demo](https://codesandbox.io/s/0mk3qwpl4l).
## License
MIT © [bvaughn](https://github.com/bvaughn)