https://github.com/vanilla-icecream/react-infinite-scroll-loading

Infinite scroll component for React.
https://github.com/vanilla-icecream/react-infinite-scroll-loading

infinite loading react scroll

Last synced: 7 months ago
JSON representation

Infinite scroll component for React.

• Host: GitHub
• URL: https://github.com/vanilla-icecream/react-infinite-scroll-loading
• Owner: Vanilla-IceCream
• License: mit
• Created: 2019-09-02T02:45:43.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2023-01-04T08:59:45.000Z (almost 3 years ago)
• Last Synced: 2024-04-25T16:22:15.688Z (over 1 year ago)
• Topics: infinite, loading, react, scroll
• Language: JavaScript
• Homepage:
• Size: 840 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Infinite Scroll Loading

Infinite scroll component for React.

## Installation and Usage

```bash

$ npm i react-infinite-scroll-loading -S

# or

$ yarn add react-infinite-scroll-loading

```

```js

// for commonjs

const InfiniteScrollLoading = require('react-infinite-scroll-loading');

// for es modules

import InfiniteScrollLoading from 'react-infinite-scroll-loading';

```

## Getting Started

[![Edit red-https-thrgc](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/red-https-thrgc?fontsize=14)

### Window scroll events

```js

  {

    !!items.length

    && items.map(item => 
{item.name}
)

  }

  {isLoading && 
Loading...
}


```

### DOM scroll events

```js

import styled from '@emotion/styled';

const Wrapper = styled('div')`

  height: 660px;

  overflow: auto;

`;

  

    {

      !!items.length

      && items.map(item => 
{item.name}
)

    }

    {isLoading && 
Loading...
}

  


```

### Custom parent element

```js

import styled from '@emotion/styled';

const Wrapper = styled('div')`

  height: 660px;

  overflow: auto;

`;

const wrapperRef = useRef();

  

     wrapperRef}

    >

      {

        !!items.length

        && items.map(item => 
{item.name}
)

      }

      {isLoading && 
Loading...
}

    

  


  ...

```

## API

| Name              | Type                              | Default | Description                                                                                                      |

|-------------------|-----------------------------------|---------|------------------------------------------------------------------------------------------------------------------|

| `element`         | `React.Node`                      | `div`   | Name of the element that the component should render as.                                                         |

| `pageStart`       | `number`                          | `0`     | The number of the first page to load, With the default of `0`, the first page is `1`.                            |

| `hasMore`         | `boolean`                         | `false` | Whether there are more items to be loaded. Event listeners are removed if `false`.                               |

| `loadMore`        | `loadMore(page: number): void`    | `null`  | A callback when more items are requested by the user.                                                            |

| `resetPage`       | `boolean`                         | `false` | Whether the component should reset the page start number.                                                        |

| `threshold`       | `number`                          | `250`   | The distance in pixels before the end of the items that will trigger a call to `loadMore`.                       |

| `useWindow`       | `boolean`                         | `false` | Add scroll listeners to the window, or else, the component's `parentNode`.                                       |

| `getScrollParent` | `getScrollParent(): ?HTMLElement` | `null`  | Override method to return a different scroll listener if it's not the immediate parent of InfiniteScrollLoading. |

| `useCapture`      | `boolean`                         | `false` | Proxy to the `useCapture` option of the added event listeners.                                                   |