RHW-19

README.md

@@ -6,12 +6,12 @@
 The monorepo for react-hook-window project. It contains:
 
 - [`@react-hook-window/use-windowed-list`][use-windowed-list] - React hook to render only the visible items in a container.
-- [`@react-hook-window/use-infinite-loader`][use-infinite-loader] - React hook to manage infinite loading of windoed list items.
+- [`@react-hook-window/use-items-loader`][use-items-loader] - React hook to manage infinite loading of windowed list items.
 
 <!-- L I N K S -->
 
 [use-windowed-list]: /packages/use-windowed-list
-[use-infinite-loader]: /packages/use-infinite-loader
+[use-items-loader]: /packages/use-items-loader
 [lerna]: https://lerna.js.org/
 [commitizen]: http://commitizen.github.io/cz-cli
 

package.json

@@ -11,8 +11,8 @@
     "prebootstrap": "yarn build",
     "bootstrap": "yarn lerna bootstrap",
     "clean:use-windowed-list": "yarn workspace @react-hook-window/use-windowed-list clean",
-    "clean:use-infinite-loader": "yarn workspace @react-hook-window/use-infinite-loader clean",
-    "clean": "yarn clean:use-windowed-list && yarn clean:use-infinite-loader",
+    "clean:use-items-loader": "yarn workspace @react-hook-window/use-items-loader clean",
+    "clean": "yarn clean:use-windowed-list && yarn clean:use-items-loader",
     "prebuild": "yarn run clean",
     "build": "rollup --config",
     "test": "jest ./tests",

packages/use-infinite-loader/package.json → packages/use-items-loader/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@react-hook-window/use-infinite-loader",
+  "name": "@react-hook-window/use-items-loader",
   "version": "0.0.0",
   "repository": "git@github.com:owanturist/react-hook-window.git",
   "author": "Anton Ovechkin <owanturist@gmail.com>",

packages/use-infinite-loader/src/index.ts → packages/use-items-loader/src/index.ts

@@ -7,23 +7,23 @@ export interface LoadingItemsRange {
   loadCount: number
 }
 
-export interface UseInfiniteLoaderOptions {
-  isScrolling: boolean
+export interface UseItemsLoaderOptions {
+  skip?: boolean
   overscanFromIndex: number
   overscanBeforeIndex: number
   shouldLoadItem(index: number): boolean
   loadItemsRange(range: LoadingItemsRange): void
 }
 
-export const useInfiniteLoader = ({
-  isScrolling,
+export const useItemsLoader = ({
+  skip = false,
   overscanFromIndex,
   overscanBeforeIndex,
   shouldLoadItem,
   loadItemsRange
-}: UseInfiniteLoaderOptions): void => {
+}: UseItemsLoaderOptions): void => {
   useEffect(() => {
-    if (isScrolling) {
+    if (skip) {
       return
     }
 
@@ -41,7 +41,7 @@ export const useInfiniteLoader = ({
       })
     }
   }, [
-    isScrolling,
+    skip,
     overscanFromIndex,
     overscanBeforeIndex,
     shouldLoadItem,

packages/use-windowed-list/README.md

@@ -1,6 +1,6 @@
 # use-windowed-list
 
-React hook to render only the visible items in a container.
+React hook to render only visible items in a container.
 
 ## Getting Started
 
@@ -549,7 +549,7 @@ A set of available values defining a target element when scrolling via [`UseW
    │                 │           │                 │           │                 │
    └─────────────────┘           └─────────────────┘           └─────────────────┘
 
-                                                                      3 ▼ no change
+    ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌  3 ▼ no change
 
   ┏┯━━━━━━━━━━━━━━━━━┯┓          ┌─────────────────┐           ┌─────────────────┐
   ┃│ #0              │┃          │ #0              │           │ #0              │
@@ -623,7 +623,7 @@ A set of available values defining a target element when scrolling via [`UseW
    │                 │           │                 │           │                 │
    └─────────────────┘           └─────────────────┘           └─────────────────┘
 
-                                                                      3 ▼ no change
+    ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌  3 ▼ no change
 
    ┌─────────────────┐           ┌─────────────────┐           ┌─────────────────┐
    │ #0              │           │ #0              │           │ #0              │
@@ -733,7 +733,8 @@ A set of available values defining a target element when scrolling via [`UseW
    │                 │           │                 │           │                 │
    └─────────────────┘           └─────────────────┘           └─────────────────┘
 
-                                                                    12 ▼ no change
+   ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌  12 ▼ no change
+
   3. scrolling to 12th that is already visible - no scroll needed
   4. scrolling to 3th that is farther than one viewport - scroll to center the 3rd item
   5. scrolling to 0th that is closer than one viewport - scroll as little as possible
@@ -843,7 +844,7 @@ A set of available values defining a target element when scrolling via [`UseW
    │                 │           │                 │          ┃│                 │┃
    └─────────────────┘           └─────────────────┘          ┗┷━━━━━━━━━━━━━━━━━┷┛
 
-                                                                      3 ▼
+    ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌      3 ▼
 
   ┏┯━━━━━━━━━━━━━━━━━┯┓          ┌─────────────────┐           ┌─────────────────┐
   ┃│ #0              │┃          │ #0              │           │ #0              │
@@ -926,7 +927,7 @@ A set of available values defining a target element when scrolling via [`UseW
    │                 │           │                 │           │                 │
    └─────────────────┘           └─────────────────┘           └─────────────────┘
 
-                                                                      6 ▼
+    ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌     6 ▼
 
   ┏┯━━━━━━━━━━━━━━━━━┯┓          ┌─────────────────┐           ┌─────────────────┐
   ┃│ #0              │┃          │ #0              │           │ #0              │
@@ -1009,7 +1010,7 @@ A set of available values defining a target element when scrolling via [`UseW
    │                 │           │                 │           │                 │
    └─────────────────┘           └─────────────────┘           └─────────────────┘
 
-                                                                       7 ▼
+    ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌      7 ▼
 
   ┏┯━━━━━━━━━━━━━━━━━┯┓          ┌─────────────────┐           ┌─────────────────┐
   ┃│ #0              │┃          │ #0              │           │ #0              │

rollup.config.js

@@ -136,7 +136,7 @@ export default [
     umdName: 'useWindowedList'
   }),
   ...makeConfig({
-    root: path.resolve(__dirname, 'packages/use-infinite-loader'),
+    root: path.resolve(__dirname, 'packages/use-items-loader'),
     umdName: 'useWindowedList'
   })
 ]

sandbox/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@react-hook-window/use-windowed-list": "*",
-    "@react-hook-window/use-infinite-loader": "*",
+    "@react-hook-window/use-items-loader": "*",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.2.0",

sandbox/src/InfiniteLoaderDemo.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useWindowedList } from '@react-hook-window/use-windowed-list'
-import { useInfiniteLoader } from '@react-hook-window/use-infinite-loader'
+import { useItemsLoader } from '@react-hook-window/use-items-loader'
 
 const loadRange = (
   start: number,
@@ -84,8 +84,8 @@ const InfiniteRangeLoaderDemo = React.memo(() => {
     itemCount: 1000
   })
 
-  useInfiniteLoader({
-    isScrolling,
+  useItemsLoader({
+    skip: isScrolling,
     overscanFromIndex,
     overscanBeforeIndex,
     shouldLoadItem,
@@ -147,8 +147,8 @@ const InfinitePagedLoaderDemo = React.memo(() => {
     itemCount: 1000
   })
 
-  useInfiniteLoader({
-    isScrolling,
+  useItemsLoader({
+    skip: isScrolling,
     overscanFromIndex,
     overscanBeforeIndex,
     shouldLoadItem,
@@ -196,8 +196,8 @@ const UndefinitePagedLoaderDemo = React.memo(() => {
     itemCount: items.length + 1
   })
 
-  useInfiniteLoader({
-    isScrolling,
+  useItemsLoader({
+    skip: isScrolling,
     overscanFromIndex,
     overscanBeforeIndex,
     shouldLoadItem,