Skip to content

2.5.0

Latest

Choose a tag to compare

@bvaughn bvaughn released this 22 Oct 00:28

Features

  • Add scrollElement prop to List and Grid for lists and grids that scroll along with other content. Pass "window" to scroll with the page, or an ancestor element that scrolls. The list or grid renders at its full height and only renders the rows visible within the scroll element's viewport; its position within the scroll element is measured whenever it renders, scrolls, or resizes, and whenever content before it is resized, inserted, or removed (e.g. an image loading above it). Imperative scroll methods scroll the scroll element. Grid columns scroll with the scroll element too if the grid is as wide as its content (e.g. style={{ width: "max-content" }}); otherwise they scroll within the grid. Add a scrolling with the page page to the docs site.
  • Add useVirtualizer hook for rendering custom (headless) virtualized content, e.g. a semantic <table>. It returns the items to render (with their offsets and sizes), the total size, the visible range, and a scrollToIndex method; options mirror the props of List (including scrollElement and dynamic sizes from useDynamicRowHeight). Add a useVirtualizer page to the docs site.
  • Add useIsScrolling hook for tracking whether a list, grid, or scroll element is scrolling (e.g. to render simplified rows while scrolling). It uses the "scrollend" event where supported. Add a useIsScrolling page to the docs site (replacing the common question about scrolling indicators).
  • Scrolling to a row, column, or cell (scrollToRow, scrollToColumn, scrollToCell, and useVirtualizer's scrollToIndex) respects the CSS scroll-padding of the element being scrolled, like the browser's scrollIntoView. For example, scroll-padding-top can keep rows from being aligned underneath a sticky header.
  • Add an infinite loading page to the docs site.