open-index/open-npm huggingface dataset:
npm package: @react-hooks-custom/use-scroll
Description: Get scrolling value quickly by React hook
Author: BC Lau
Latest version: 1.1.1

<hr>
<div align="center">
  <h1 align="center">
    useScroll()
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@react-hooks-custom/use-scroll">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@react-hooks-custom/use-scroll?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@react-hooks-custom/use-scroll">
    <img alt="Types" src="https://img.shields.io/npm/types/@react-hooks-custom/use-scroll?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@react-hooks-custom/use-scroll">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@react-hooks-custom/use-scroll?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @react-hooks-custom/use-scroll</pre>
<hr>

A React hook for updating components when the scroll position of the window on the y-axis changes.

# Quick Start

```
import useScroll from '@react-hooks-custom/use-scroll'

const Component = (props) => {
  const { scrollX, scrollY } = useScroll();

  return <div>scroll pos: {scrollX}, {scrollY}</div>
}
```

# API

#### **useScroll () => ScrollType**

```
type ScrollType = {
  scrollX: number;
  scrollY: number;
}
```

#### **Returns { scrollX, scrollY }**

|| Type | Description
---|---|---
scrollX | number | The current scroll position of the window on the x-axis
scrollY | number | The current scroll position of the window on the y-axis

# LICENSE

MIT
npm package: @react-hooks-hub/use-click-outside
Description: useClickOutside is a custom React hook designed for detecting clicks outside a specified element or set of elements.
Author: Keized
Latest version: 1.0.0


<h1 align="center">Use Click Outside</h1>

<p align="center">
`@react-hooks-hub/use-click-outside` is a custom React hook designed for detecting clicks outside a specified element or set of elements. Easy to integrate and use, this hook is perfect for scenarios like closing dropdown menus, popups, or modals when a user clicks outside these components. It supports multiple referenced elements and provides a straightforward interface for adding custom click outside event handling. Compatible with React and TypeScript, useClickOutside is an essential tool for enhancing user interaction in your web applications.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@react-hooks-hub/use-click-outside" title="use-click-outside on NPM">
  <img src="https://img.shields.io/npm/v/@react-hooks-hub/use-click-outside.svg?style=for-the-badge" alt="NPM version" />
  </a>
  <img src="https://img.shields.io/github/actions/workflow/status/Keized/react-hooks-hub/use-click-outside.yml?style=for-the-badge" alt="CI status" />
  &nbsp;
  <img src="https://img.shields.io/bundlephobia/minzip/@react-hooks-hub/use-click-outside?style=for-the-badge" alt="Bundlephobia" />
  &nbsp;
</p>



# @react-hooks-hub/use-click-outside


## Installation

Use your preferred package manager to install `@react-hooks-hub/use-click-outside`:

```bash
npm install @react-hooks-hub/use-click-outside
# or
yarn add @react-hooks-hub/use-click-outside
```

## Usage

Import and use the useClickOutside hook in your component:

```JSX
import React, { useState, useRef } from 'react';
import { useClickOutside } from '@react-hooks-hub/use-click-outside';

function DropdownMenu() {
    const [isOpen, setIsOpen] = useState(false);
    const menuRef = useRef(null);

    useClickOutside([menuRef], (isOutside) => {
      setIsOpen(isOutside)
    });

    return (
        <div>
            <button onClick={() => setIsOpen(!isOpen)}>Toggle Menu</button>
            {isOpen && (
                <div ref={menuRef}>
                    {/* content */}
                </div>
            )}
        </div>
    );
}

export default DropdownMenu;
```
npm package: @react-hooks-hub/use-dark-mode
Description: A React hook to manage dark mode and light mode with persistence.
Author: Keized
Latest version: 1.0.0


<h1 align="center">Use Dark Mode</h1>

<p align="center">
  `@react-hooks-hub/use-dark-mode` 
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@react-hooks-hub/use-dark-mode" title="use-dark-mode on NPM">
  <img src="https://img.shields.io/npm/v/@react-hooks-hub/use-dark-mode.svg?style=for-the-badge" alt="NPM version" />
  </a>
  <img src="https://img.shields.io/github/actions/workflow/status/Keized/react-hooks-hub/use-dark-mode.yml?style=for-the-badge" alt="CI status" />
  &nbsp;
  <img src="https://img.shields.io/codecov/c/github/keized/react-hooks-hub?flag=use-dark-mode&style=for-the-badge" alt="Coverage" />
  &nbsp;
  <img src="https://img.shields.io/bundlephobia/minzip/@react-hooks-hub/use-dark-mode?style=for-the-badge" alt="Bundlephobia" />
  &nbsp;
</p>

# @react-hooks-hub/use-dark-mode

`use-dark-mode` is a custom React hook that allows you to easily manage dark mode in your application. It simplifies the handling of user preferences regarding the theme (light or dark) with support for the system default mode. This hook is configurable and can be persisted in `localStorage` to remember the user's choices between sessions.

## Features

- **Automatic Dark Mode**: Based on the user's system preferences.
- **Persistence**: Saves the user's chosen theme in `localStorage`.
- **Simple Configuration**: Customize the storage key and default mode.
- **Easy Integration**: Simple to use in any React application.

## Installation

Use your preferred package manager to install `@react-hooks-hub/use-dark-mode`:

```bash
npm install @react-hooks-hub/use-dark-mode
# or
yarn add @react-hooks-hub/use-dark-mode
```

## Usage

Import and use the useDarkMode hook in your component:

```JSX
import React from 'react';
import { useDarkMode } from '@react-hooks-hub/use-dark-mode';

function MyComponent() {
  const { switchMode, darkMode } = useDarkMode({ persistance: true, defaultMode: 'system' });

  return (
    <div style={{ background: darkMode ? '#333' : '#fff', color: darkMode ? '#fff' : '#000' }}>
      <h1>{darkMode ? 'Dark Mode' : 'Light Mode'}</h1>
      <button onClick={() => switchMode('light')}>Light</button>
      <button onClick={() => switchMode('dark')}>Dark</button>
      <button onClick={() => switchMode('system')}>System</button>
    </div>
  );
};

export default MyComponent;

```
npm package: @react-hooks-hub/use-debounce
Description: This react hook provide a way to delay execution of functions, enhancing user experience and performance.
Author: Keized
Latest version: 1.1.9


<h1 align="center">Use Debounce</h1>

<p align="center">
  `@react-hooks-hub/use-debounce` hook allows you to manage delayed execution of functions, making it particularly useful for scenarios where you need to control the rate of certain actions based on user input.
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@react-hooks-hub/use-debounce" title="use-debounce on NPM">
  <img src="https://img.shields.io/npm/v/@react-hooks-hub/use-debounce.svg?style=for-the-badge" alt="NPM version" />
  </a>
  <img src="https://img.shields.io/github/actions/workflow/status/Keized/react-hooks-hub/use-debounce.yml?style=for-the-badge" alt="CI status" />
  &nbsp;
  <img src="https://img.shields.io/codecov/c/github/keized/react-hooks-hub?flag=use-debounce&style=for-the-badge" alt="Coverage" />
  &nbsp;
  <img src="https://img.shields.io/bundlephobia/minzip/@react-hooks-hub/use-debounce?style=for-the-badge" alt="Bundlephobia" />
  &nbsp;
</p>



# @react-hooks-hub/use-debounce


## Installation

Use your preferred package manager to install `@react-hooks-hub/use-debounce`:

```bash
npm install @react-hooks-hub/use-debounce
# or
yarn add @react-hooks-hub/use-debounce
```

## Usage

Import and use the useDebounce hook in your component:

```JSX
import React from 'react';
import { useDebounce } from '@react-hooks-hub/use-debounce';

const MyComponent = () => {
  // Create a debounced version of the handleSearch function using the useDebounce hook
  // The debounced function will trigger after a 300ms delay after the last change
  const debouncedSearch = useDebounce(handleSearch, 300);

  // Define the handleSearch function, which represents the action to be debounced
  // This function takes a 'query' parameter representing the search query
  // In this example, the function logs the query to the console
  const handleSearch = (query: string) => {
    console.log(query);
  };

  return (
    <input
      type="text"
      onChange={(e) => debouncedSearch(e.target.value)}
      placeholder="Search..."
    />
  );
};

export default MyComponent;
```
npm package: @react-hooks-hub/use-media-query
Description: This react hook provide the state and the orientation of the screen
Author: Keized
Latest version: 1.1.8


<h1 align="center">Use Media Query</h1>
<br />

<p align="center">
  <strong>@react-hooks-hub/use-media-query</strong> is a custom React hook that provides the state of the screen's device type (desktop, tablet, mobile) and orientation (portrait, landscape). It's designed to create responsive interfaces and adapt content based on screen size.
</p>

<br />

<p align="center">
  <a href="https://www.npmjs.com/package/@react-hooks-hub/use-media-query" title="use-media-query on NPM">
  <img src="https://img.shields.io/npm/v/@react-hooks-hub/use-media-query.svg?style=for-the-badge" alt="NPM version" />
  </a>
  &nbsp;
  <img src="https://img.shields.io/github/actions/workflow/status/Keized/react-hooks-hub/use-media-query.yml?style=for-the-badge" alt="CI status" />
  &nbsp;
  <img src="https://img.shields.io/codecov/c/github/keized/react-hooks-hub?flag=use-media-query&style=for-the-badge" alt="Coverage" />
  &nbsp;
  <img src="https://img.shields.io/bundlephobia/minzip/@react-hooks-hub/use-media-query?style=for-the-badge" alt="Bundlephobia" />
  &nbsp;
</p>

<br />
<br />

## Installation

Use your preferred package manager to install `@react-hooks-hub/use-media-query`:

```bash
npm install @react-hooks-hub/use-media-query
# or
yarn add @react-hooks-hub/use-media-query
```

## Usage

Import and use the useMediaQuery hook in your component:

```JSX
import React from 'react';
import { useMediaQuery } from '@react-hooks-hub/use-media-query';

const MyComponent = () => {
  const { device, orientation } = useMediaQuery();

  return (
    <div>
      <p>Device: {device}</p>
      <p>Orientation: {orientation}</p>
    </div>
  );
};

export default MyComponent;
```

## Options

You can customize the behavior of the hook by passing options when using it:

```jsx
const { device, orientation } = useMediaQuery({
  breakpoints: { desktop: 1200, tablet: 768, mobile: 0 },
  debounceDelay: 300
});
```

- breakpoints: An object defining the breakpoints for each device type. By default, breakpoints are set for desktop, tablet, and mobile.
- debounceDelay: Debounce delay to limit frequent calls during window resizing.


## Examples
Custom Screen Sizes
You can define custom screen sizes in the breakpoints option:

```jsx
const { device } = useMediaQuery({
  breakpoints: { desktop: 1200, tablet: 768, mobile: 0, custom: 1500 }
});

// Usage in JSX
{device === 'custom' && <p>Custom screen size</p>}
```


## License

MIT
npm package: @react-hooks-hub/use-throttle
Description: This hook provide a way to control and limit the rate at which a function can be called.
Author: Keized
Latest version: 1.0.7


<h1 align="center">Use Throttle</h1>

<p align="center">
  `@react-hooks-hub/use-throttle` hook allows you to throttle the execution of a function.
  Throttling is a technique used to limit the rate at which a function can be called, making it especially useful in scenarios where you want to control how frequently certain actions are performed (ex: check the cursor position). 
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@react-hooks-hub/use-throttle" title="use-throttle on NPM">
  <img src="https://img.shields.io/npm/v/@react-hooks-hub/use-throttle.svg?style=for-the-badge" alt="NPM version" />
  </a>
  <img src="https://img.shields.io/github/actions/workflow/status/Keized/react-hooks-hub/use-throttle.yml?style=for-the-badge" alt="CI status" />
  &nbsp;
  <img src="https://img.shields.io/codecov/c/github/keized/react-hooks-hub?flag=use-throttle&style=for-the-badge" alt="Coverage" />
  &nbsp;
  <img src="https://img.shields.io/bundlephobia/minzip/@react-hooks-hub/use-throttle?style=for-the-badge" alt="Bundlephobia" />
  &nbsp;
</p>



# @react-hooks-hub/use-throttle


## Installation

Use your preferred package manager to install `@react-hooks-hub/use-throttle`:

```bash
npm install @react-hooks-hub/use-throttle
# or
yarn add @react-hooks-hub/use-throttle
```

## Usage

Import and use the throttle hook in your component:

```JSX
import React, { useState } from 'react';
import { useThrottle } from '@react-hooks-hub/use-throttle';

function CursorPositionTracker() {
  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });

  // Create a throttled version of the function to update cursor position
  const updateCursorPosition = useThrottle((e) => {
    setCursorPosition({ x: e.clientX, y: e.clientY });
  }, 100); // Throttle to 100ms

  // Attach an event listener to track cursor movement
  const handleMouseMove = (e) => {
    updateCursorPosition(e);
  };

  return (
    <div>
      <h1>Cursor Position Tracker</h1>
      <p>Move your mouse around to see the cursor's position:</p>
      <div
        onMouseMove={handleMouseMove}
        style={{
          width: '300px',
          height: '300px',
          border: '1px solid #ccc',
          padding: '10px',
        }}
      >
        <p>Cursor X: {cursorPosition.x}</p>
        <p>Cursor Y: {cursorPosition.y}</p>
      </div>
    </div>
  );
}

export default CursorPositionTracker;
```
npm package: @react-hooks-library/core
Description: A collection of hooks and utilities for React
Author: Arpit
Latest version: 0.6.2

# ![React Hooks Library](https://github.com/heyitsarpit/react-hooks-library/blob/main/website/public/logo_text.png)

[![Build Status](https://img.shields.io/github/workflow/status/heyitsarpit/react-hooks-library/Publish%20to%20NPM%20and%20Release%20To%20Github?style=flat&colorA=34B6BF&colorB=34B6BF)](https://github.com/heyitsarpit/react-hooks-library/actions/workflows/publish_release.yml?query=event%3Apush)
[![Version](https://img.shields.io/npm/v/@react-hooks-library/core?style=flat&colorA=33C5BC&colorB=33C5BC)](https://www.npmjs.com/package/@react-hooks-library/core)
[![License](https://img.shields.io/github/license/heyitsarpit/react-hooks-library?style=flat&colorA=32D4CB&colorB=32D4CB)](/LICENSE)

A collection of hooks and utilities for React. List of [all function](https://react-hooks-library.vercel.app/functions). For more information, read the [official documentation](https://react-hooks-library.vercel.app).

## Features

- 🔮 Typescript

  Written in typescript so you get the advantage of strong type safety

- 🧠 Server Side Ready

  All hooks handle SSR rendering and work well with frameworks like Next/Gatsby

- 🌿 Tree Shakable

  Exported as es modules, import cost for individual function is tiny

- 🎡 Interactive Demos

  All hooks have a demo example to demonstrate their use

## Installation

```bash
npm i @react-hooks-library/core
# or
yarn add @react-hooks-library/core
# or
pnpm add @react-hooks-library/core
```

## Contribution

Contribution guide coming soon... 🤞🏽

## Credits

This library is heavily inspired by [VueUse](https://vueuse.org/), from the vue ecosystem.

## License

[MIT](/LICENSE) © 2021 | [Arpit](https://github.com/heyitsarpit)
npm package: @react-hooks-library/shared
Description: A collection of hooks and utilities for React
Author: Arpit
Latest version: 0.6.2

# ![React Hooks Library](https://github.com/heyitsarpit/react-hooks-library/blob/main/website/public/logo_text.png)

[![Build Status](https://img.shields.io/github/workflow/status/heyitsarpit/react-hooks-library/Publish%20to%20NPM%20and%20Release%20To%20Github?style=flat&colorA=34B6BF&colorB=34B6BF)](https://github.com/heyitsarpit/react-hooks-library/actions/workflows/publish_release.yml?query=event%3Apush)
[![Version](https://img.shields.io/npm/v/@react-hooks-library/core?style=flat&colorA=33C5BC&colorB=33C5BC)](https://www.npmjs.com/package/@react-hooks-library/core)
[![License](https://img.shields.io/github/license/heyitsarpit/react-hooks-library?style=flat&colorA=32D4CB&colorB=32D4CB)](/LICENSE)

A collection of hooks and utilities for React. List of [all function](https://react-hooks-library.vercel.app/functions). For more information, read the [official documentation](https://react-hooks-library.vercel.app).

## Features

- 🔮 Typescript

  Written in typescript so you get the advantage of strong type safety

- 🧠 Server Side Ready

  All hooks handle SSR rendering and work well with frameworks like Next/Gatsby

- 🌿 Tree Shakable

  Exported as es modules, import cost for individual function is tiny

- 🎡 Interactive Demos

  All hooks have a demo example to demonstrate their use

## Installation

```bash
npm i @react-hooks-library/core
# or
yarn add @react-hooks-library/core
# or
pnpm add @react-hooks-library/core
```

## Contribution

Contribution guide coming soon... 🤞🏽

## Credits

This library is heavily inspired by [VueUse](https://vueuse.org/), from the vue ecosystem.

## License

[MIT](/LICENSE) © 2021 | [Arpit](https://github.com/heyitsarpit)
npm package: @react-hookz/eslint-config
Description: eslint configuration files used in @react-hookz projects
Latest version: 4.1.7
Deprecated: Package is deprecated and will be deleted soon. Use @ver0/eslint-config instead.

> [!CAUTION]
> __PACKAGE IS DEPRECATED AND WILL BE DETED SOON__  
> USE [@ver0/eslint-config](https://github.com/ver0-project/eslint-config) instead

<div align="center">

# @react-hookz/eslint-config

eslint configuration files used in @react-hookz projects

[![NPM Version](https://flat.badgen.net/npm/v/@react-hookz/eslint-config)](https://www.npmjs.com/package/@react-hookz/eslint-config)
[![NPM Downloads](https://flat.badgen.net/npm/dm/@react-hookz/eslint-config)](https://www.npmjs.com/package/@react-hookz/eslint-config)
[![NPM Dependents](https://flat.badgen.net/npm/dependents/@react-hookz/eslint-config)](https://www.npmjs.com/package/@react-hookz/eslint-config)
[![Build](https://img.shields.io/github/actions/workflow/status/react-hookz/eslint-config/CI.yml?branch=master&style=flat-square)](https://github.com/react-hookz/eslint-config/actions)

</div>

## Installation

This package does not install `eslint`, so you need to install them manually.

```shell
yarn add -D @react-hookz/eslint-config eslint
```

## Usage

This config is expected to be used with ESLint 8.3+, as it utilizes flat config.

Import sub-configs you are interested in, spreading them into your config. All configs are
guaranteed to be an array.

Some configs, like `jest` and `vitest`, require extra dependencies to be installed. You can find the
required dependencies in the respective READMEs.

```js
import baseConfig from '@react-hookz/eslint-config/base.js';
import reactConfig from '@react-hookz/eslint-config/react.js';
import vitestConfig from '@react-hookz/eslint-config/vitest.js';

export default [
	...baseConfig,
	...reactConfig,
	...vitestConfig,
	{
		rules: {
			// your own overrides
		},
	},
];
```
npm package: @react-html-plots/base
Description: A React component library for creating HTML plots
Author: Bouzid Anas
Latest version: 0.0.18

# react-html-plots

React component library for building plots with HTML and CSS

## Overview and Concept
The main goal of this component library is to be able to build extremely customizable plots that are responsive to changes in data and customization parameters/properties.
 - Use CSS for styling so that styling can be customized/altered.
 - Use dictionary/json containing a template to construct repeating main plot elements like bars or lines
 and use other inputs to alter the template for each specific instance.
 - Only re-render elements that are altered so that changes are less costly, making it possible
 to have more changes occur in less time.
 - Allow elements to respond to changes with CSS transitions and animations.
 - Core components should have self-contained state handling and context
    - Components nested inside Core components should respond to changes in only the variables (of its parent Core component state) that impact itself and ignore all others.

## Demos

### 1. Simple bar plot demo  [**(Try it out!)**](https://bouzidanas.github.io/react-html-plots/)
[![react-html-bar-plot-demo](https://github.com/bouzidanas/react-html-plots/assets/25779130/9e16e3f9-e88a-4d39-b65f-182a97a1d72a)](https://bouzidanas.github.io/react-html-plots/)


## Developer notes:
This project is currently in development. Core components and utilities are in flux. See [developer notes](https://github.com/bouzidanas/react-html-plots/blob/dev/DEV.md) for more.

### State management system and impact on component design.
[Legend-State](https://github.com/LegendApp/legend-state) was chosen for this library to handle state management for most components. React context is used in conjunction with Legend-State to minimize prop drilling and localize states to different levels of component trees. These choices have significantly impacted component function signatures and the types of the props that components require/accept. More specifically, Legend-State requires the use of "observables" to contain, track, and manipulate state. Currently, it has been more convenient to pass these around (through contexts, global state, and/or props) instead of raw data.
npm package: @react-html-plots/core
Description: A React component library for creating HTML plots
Author: Bouzid Anas
Latest version: 0.0.20

# react-html-plots

React component library for building plots with HTML and CSS

## Overview and Concept
The main goal of this component library is to be able to build extremely customizable plots that are responsive to changes in data and customization parameters/properties.
 - Use CSS for styling so that styling can be customized/altered.
 - Use dictionary/json containing a template to construct repeating main plot elements like bars or lines
 and use other inputs to alter the template for each specific instance.
 - Only re-render elements that are altered so that changes are less costly, making it possible
 to have more changes occur in less time.
 - Allow elements to respond to changes with CSS transitions and animations.
 - Core components should have self-contained state handling and context
    - Components nested inside Core components should respond to changes in only the variables (of its parent Core component state) that impact itself and ignore all others.

## Demos

### 1. Simple bar plot demo  [**(Try it out!)**](https://bouzidanas.github.io/react-html-plots/)
[![react-html-bar-plot-demo](https://github.com/bouzidanas/react-html-plots/assets/25779130/9e16e3f9-e88a-4d39-b65f-182a97a1d72a)](https://bouzidanas.github.io/react-html-plots/)


## Developer notes:
This project is currently in development. Core components and utilities are in flux. See [developer notes](https://github.com/bouzidanas/react-html-plots/blob/dev/DEV.md) for more.

### State management system and impact on component design.
[Legend-State](https://github.com/LegendApp/legend-state) was chosen for this library to handle state management for most components. React context is used in conjunction with Legend-State to minimize prop drilling and localize states to different levels of component trees. These choices have significantly impacted component function signatures and the types of the props that components require/accept. More specifically, Legend-State requires the use of "observables" to contain, track, and manipulate state. Currently, it has been more convenient to pass these around (through contexts, global state, and/or props) instead of raw data.
npm package: @react-infinite-scroll/react-infinite-scroll
Description: React Component to facilitate infinite scroll functionality.
Author: React-Infinite-Scroll
Latest version: 1.1.5

# React-Infinite-Scroll
[![npm (scoped)](https://img.shields.io/npm/v/@react-infinite-scroll/react-infinite-scroll)](https://www.npmjs.com/package/@react-infinite-scroll/react-infinite-scroll)
[![Build Status](https://travis-ci.com/React-Infinite-Scroll/React-Infinite-Scroll.svg?branch=master)](https://travis-ci.com/React-Infinite-Scroll/React-Infinite-Scroll)

## Installation
`npm i --save @react-infinite-scroll/react-infinite-scroll`

## Usage
`import InfiniteScroll from '@react-infinite-scroll/react-infinite-scroll'`

## Example
```js
const scrollOwnerRef = useRef(null)
const contentRef = useRef(null)


<div style={{overflow: 'auto'}} ref={scrollOwnerRef}> // this element will hold the scrollbar
  <table>
    <tbody ref={contentRef}> // this element will start overflowing
        <InfiniteScroll
          getScrollOwnerRef={() => scrollOwnerRef}
          getContentRef={() => contentRef}
          loadMore={loadItems} // callback to load more items  
          threshold={300} // distance of remaining scroll in pixels to trigger loadMore callback
          loader={<div>Loading items...</div>}
          hasMore={true} // boolean value, set false when you reach your last page.
          isLoading={false} // boolean value, to avoid load calls while a page is being loaded
        >
            {items} // wrap your list of items by InfiniteScroll, loader will be appended to children of InfiniteScroll
        </InfiniteScroll>
    </tbody>
  </table>
</div>
```

PS: Please do report issues :)