Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-window-random-access
Advanced tools
Readme
React components for efficiently rendering large lists and tabular data
# Yarn
yarn add react-window-random-access
# NPM
npm install --save react-window-random-access
Learn more at react-window.now.sh:
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-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:
react-virtualized
. (It's still widely used by a lot of successful projects!)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.
Yes. I recommend using the react-virtualized-auto-sizer
package:
Here's a Code Sandbox demo.
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!
Yes. I recommend using the react-window-infinite-loader
package:
Here's a Code Sandbox demo.
Yes, using the outerElementType
prop.
Here's a Code Sandbox demo.
Yes, although it requires a bit of inline styling.
Here's a Code Sandbox demo.
Yes, although it requires a bit of inline styling.
Here's a Code Sandbox demo.
Yes, although it requires a small amount of user code. Here's a Code Sandbox demo.
MIT © bvaughn
FAQs
React components for efficiently rendering large, scrollable lists and tabular data
The npm package react-window-random-access receives a total of 21 weekly downloads. As such, react-window-random-access popularity was classified as not popular.
We found that react-window-random-access demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.