1.8.5 • Published 9 months ago

react-window v1.8.5

Weekly downloads
452,512
License
MIT
Repository
github
Last release
9 months ago

react-window

React components for efficiently rendering large lists and tabular data

NPM registry Travis NPM license

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).

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 smaller1 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:

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!

Can I lazy load data for my list?

Yes. I recommend using the react-window-infinite-loader package:

Here's a Code Sandbox demo.

Can I attach custom properties or event handlers?

Yes, using the outerElementType prop.

Here's a Code Sandbox demo.

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.

Can I add gutter or padding between items?

Yes, although it requires a bit of inline styling.

Here's a Code Sandbox demo.

Does this library support "sticky" items?

Yes, although it requires a small amount of user code. Here's a Code Sandbox demo.

License

MIT © bvaughn

intl-react-datatableinterweave-emoji-pickerhyvejs-componentshx-react-componentshx-react-components-testmandarina-antdlos-design-systemmiradormui-advanced-tablepupudu-online-debuggerq3-ui-forms@holism/corereact-den-tablereact-google-flight-datepickerreact-flame-graphreact-fluid-carouselreact-fluid-tablereact-aspenreact-base-tablereact-birchreact-birch-updatedreact-benzinreact-benzin-asketreact-benzin-testreact-benzin-test-asketreact-1apprandom-dummy-package-test1react-hex-editorreact-material-ui-datatablereact-mapfilterreact-messageboxprogram_leader_portal_pypapo-componentsneat-design-systeminput-style-onemd-partialsmdlinx-smartestdocmentor-uicf-storybookdatacwebappscra-datacwebappscra-datacwebapsscreative-gallery-shonp@neggi/baseuireact-table-virtualized@deriv/traderreact-virt-tablenaksha-components-reactreact-oakreact-vt-tablereact-vt-treereact-virtualized-tree-viewreact-timelinesreact-unifiedreact-window-csbreact-window-dynamic-listreact-window-pull-refreshreact-window-selectreact-window-sortablereact-windowed-selectreact-slctreact-simple-infinite-loadingreactcustomtablegridrelementsrondsframeworksg-item-listsgkb-tablesushiwebsymphony-bdk-ui-toolkitstreaksheettailor-uisanity-plugin-mediawhat-a-drag@agnijs/agni-uiwindow-table@actyx/actyx-ui@airtable/blocks@aics/fms-file-explorer-core@cd-ds-1/core-react@best-fin/componment@bentley/ui-components@bertilxi/section-list@bnorth/components@backslashbuild/pp-ui@autoinvent/conveyor@crave/farmblocks-input-phone@arch-ui/day-picker@kiwicom/logmole@iterplatform/components@jetshop/ui@manuscripts/symbol-picker@krowdy-ui/views@domonda/ui@deriv/p2p@ds-kit/autocomplete@elliemae/ds-datagrids@elliemae/ds-shuttle@elliemae/ds-treeview@elliemae/ds-basic@evergis/ui
1.8.5

9 months ago

1.8.4

9 months ago

1.8.3

10 months ago

1.8.2

11 months ago

1.8.1

12 months ago

1.8.0

12 months ago

1.7.2

12 months ago

1.7.1

1 year ago

1.7.0

1 year ago

1.6.2

1 year ago

1.6.1

1 year ago

1.6.0

1 year ago

1.5.2

1 year ago

1.5.1

1 year ago

1.6.0-alpha.1

1 year ago

1.5.0

1 year ago

1.4.0

1 year ago

1.4.0-alpha.1

1 year ago

1.4.0-alpha.0

1 year ago

1.3.1

1 year ago

1.2.4

1 year ago

1.2.3

1 year ago

1.2.2

1 year ago

1.3.0-alpha.0

1 year ago

1.3.0

1 year ago

1.2.1

2 years ago

1.2.0

2 years ago

1.1.2

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

1.0.0-alpha.4

2 years ago

1.0.0-alpha.3

2 years ago

1.0.0-alpha.2

2 years ago

1.0.0-alpha.1

2 years ago

10.0.0-alpha.17

2 years ago

0.1.1

5 years ago