@candidstartup/react-virtual-scroll 0.5.0 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -5,17 +5,29 @@
5
5
 
6
6
  # @candidstartup/react-virtual-scroll
7
7
 
8
- React virtual scrolling components for lists and grids following the same philosophy as [react-window](https://github.com/bvaughn/react-window). Written in TypeScript using modern React. Scalable to trillions of rows and columns.
8
+ React virtual scrolling components for lists and grids inspired by [react-window](https://github.com/bvaughn/react-window). Written in TypeScript using modern React. Scalable to trillions of rows and columns.
9
9
 
10
10
  ## Interface
11
11
 
12
- The interface is similar to `react-window` with two main changes. First, the components are functional rather than class based. Second, rather than having fixed and variable size variants of each component, the components are passed an `ItemOffsetMapping` object as a prop. This is an interface that the components query to determine the size and position of each item.
12
+ The interface is similar to `react-window` with three main changes. First, the components are functional rather than class based.
13
13
 
14
- The interface is [designed](https://www.thecandidstartup.org/2024/02/12/modern-react-virtual-scroll-grid-3.html) to ensure that the components have no scaling issues even with trillions of rows or columns. The package includes basic fixed and variable size item mappings.
14
+ Second, rather than having fixed and variable size variants of each component, the components are passed an `ItemOffsetMapping` object as a prop. This is an interface that the components query to determine the size and position of each item. The interface is [designed](https://www.thecandidstartup.org/2024/02/12/modern-react-virtual-scroll-grid-3.html) to ensure that the components have no scaling issues even with trillions of rows or columns. The package includes basic fixed and variable size item mappings.
15
+
16
+ Finally, customization options have been reworked and extended. Basic customization is provided by render props rather than component props. The virtual scrolling list and grid components are composed from simpler components rather than being self contained. Consumers can put together their own combination of basic components rather than being limited to the pre-composed high level components.
15
17
 
16
18
  ## Implementation
17
19
 
18
- Most of the logic is implemented by custom hooks that are used by both `VirtualList` and `VirtualGrid` controls. The logic that manages scrolling in a single dimension is implemented in `useVirtualScroll`. It's based on an [improved version](https://www.thecandidstartup.org/2024/04/29/modern-react-virtual-scroll-grid-9.html) of [SlickGrid's](https://github.com/6pac/SlickGrid) paged scrolling algorithm. One instance of the hook is used by `VirtualList` and two instances by `VirtualGrid`.
20
+ Most of the scrolling logic is implemented by custom hooks that are packaged up as the `VirtualScroll` basic component. The logic that manages scrolling in a single dimension is implemented in `useVirtualScroll`. It's based on an [improved version](https://www.thecandidstartup.org/2024/04/29/modern-react-virtual-scroll-grid-9.html) of [SlickGrid's](https://github.com/6pac/SlickGrid) paged scrolling algorithm. `VirtualScroll` uses two instances of the hook to handle scrolling in two dimensions.
21
+
22
+ `VirtualScroll` provides scrolling over an arbitrary size scrollable area. Rendering visible content in response to changes in scroll position is left to child components.
23
+
24
+ `DisplayList` and `DisplayGrid` are controlled components that render a window onto virtualized lists and grids.
25
+
26
+ `AutoSizer` is a higher level component that dynamically measures the size available and passes an explicit width and height to its children.
27
+
28
+ `VirtualList` = `VirtualScroll` + `AutoSizer` + `DisplayList`.
29
+
30
+ `VirtualGrid` = `VirtualScroll` + `AutoSizer` + `DisplayGrid`.
19
31
 
20
32
  ## VirtualList Example
21
33