samouss / react-infinite-scroll-list

Manage infinite list with the IntersectionObserver API

React Infinite List

Installation

yarn add react-infinite-scroll-list

Note: This library is based on the IntersectionObserver API, it's not yet widely supported. Check the compatibility table and add a Polyfill to your needs!

Check out the example on Storybook

Usage

Import the module in your application:

// From ES6
import InfiniteList from 'react-infinite-scroll-list';

// From CJS
const InfiniteList = require('react-infinite-scroll-list').default;

// From global
const InfiniteList = ReactInfiniteScrollList.default;

Then use it juste like that:

<InfiniteList
  root="container|viewport"
  isLoading={true | false}
  isEndReached={true | false}
  onReachThreshold={() => {
    console.log('Load more content');
  }}
  containerClassName="custom-container-class-name"
  sentinelClassName="custom-sentinel-class-name"
  containerTagName="div"
  sentinelTagName="div"
  threshold={0}
>
  {items.map(item => <div key={item.id}>{item.message}</div>)}
</InfiniteList>

Run Storybook

yarn start-storybook

Build Storybook

yarn build-storybook

Run the test

yarn test

react-infinite-scroll-list's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	babel-eslint
npm	babel-preset-es2015
npm	rollup-plugin-babel
npm	rollup-plugin-commonjs

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency @storybook/storybook-deployer to v2.8.16
• chore(deps): update dependency enzyme-adapter-react-16 to v1.15.8
• chore(deps): update dependency rollup-plugin-filesize to v9.1.2
• chore(deps): update dependency prop-types to v15.8.1
• chore(deps): update dependency eslint to v9
• chore(deps): update dependency eslint-config-prettier to v9
• chore(deps): update dependency eslint-plugin-prettier to v5
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency rollup to v4
• chore(deps): update dependency rollup-plugin-filesize to v10
• chore(deps): update react monorepo to v18 (major) (react, react-dom, react-test-renderer)
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): replace dependency babel-eslint with @babel/eslint-parser 7.11.0
• chore(deps): replace dependency rollup-plugin-babel with @rollup/plugin-babel
• chore(deps): update dependency eslint-plugin-import to v2.29.1
• chore(deps): update dependency eslint-plugin-jsx-a11y to v6.9.0
• chore(deps): update dependency eslint-plugin-react to v7.34.3
• chore(deps): update dependency rollup to v2.79.1
• chore(deps): update dependency eslint-config-airbnb to v19
• chore(deps): update dependency jest to v29
• chore(deps): update dependency rollup-plugin-babel to v4
• chore(deps): update storybook monorepo (major) (@storybook/addon-options, @storybook/addons, @storybook/cli, @storybook/react)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• @storybook/addon-options 3.4.12
• @storybook/addons 3.4.12
• @storybook/cli 3.4.12
• @storybook/react 3.4.12
• @storybook/storybook-deployer 2.8.10
• babel-core 6.26.3
• babel-eslint 10.1.0
• babel-plugin-external-helpers 6.22.0
• babel-plugin-transform-es2015-modules-commonjs 6.26.2
• babel-preset-env 1.7.0
• babel-preset-es2015 6.24.1
• babel-preset-react 6.24.1
• babel-preset-stage-2 6.24.1
• babel-runtime 6.26.0
• enzyme 3.11.0
• enzyme-adapter-react-16 1.15.6
• enzyme-to-json 3.6.2
• eslint 6.8.0
• eslint-config-airbnb 17.1.1
• eslint-config-prettier 7.2.0
• eslint-plugin-import 2.25.2
• eslint-plugin-jsx-a11y 6.4.1
• eslint-plugin-prettier 3.4.1
• eslint-plugin-react 7.26.1
• jest 23.6.0
• prettier 1.19.1
• prop-types 15.7.2
• react 17.0.2
• react-dom 17.0.2
• react-test-renderer 17.0.2
• rollup 2.58.0
• rollup-plugin-babel 3.0.7
• rollup-plugin-commonjs 10.1.0
• rollup-plugin-filesize 9.1.1
• rollup-plugin-uglify 6.0.4
• prop-types ^15.0.0
• react ^16.0.0 || ^17.0.0

---

• Check this box to trigger a request for Renovate to run again on this repository

Dependency deprecation warning: babel-preset-es2015 (npm)

On registry https://registry.npmjs.org/, the "latest" version (v6.24.1) of dependency babel-preset-es2015 has the following deprecation notice:

🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

Marking the latest version of an npm package as deprecated results in the entire package being considered deprecated, so contact the package author you think this is a mistake.

Please take the actions necessary to rename or substitute this deprecated package and commit to your base branch. If you wish to ignore this deprecation warning and continue using babel-preset-es2015 as-is, please add it to your ignoreDeps array in Renovate config before closing this issue, otherwise another issue will be recreated the next time Renovate runs.

Affected package file(s): package.json

Would you like to disable Renovate's deprecation warning issues? Add the following to your config:

"suppressNotifications": ["deprecationWarningIssues"]

Dependency deprecation warning: babel-preset-es2015 (npm)

On registry https://registry.npmjs.org, the "latest" version (v6.24.1) of dependency babel-preset-es2015 has the following deprecation notice:

🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

Marking the latest version of an npm package as deprecated results in the entire package being considered deprecated, so contact the package author you think this is a mistake.

Please take the actions necessary to rename or substitute this deprecated package and commit to your base branch. If you wish to ignore this deprecation warning and continue using babel-preset-es2015 as-is, please add it to your ignoreDeps array in Renovate config before closing this issue, otherwise another issue will be recreated the next time Renovate runs.

Affected package file(s): package.json

Would you like to disable Renovate's deprecation warning issues? Add the following to your config:

"suppressNotifications": ["deprecationWarningIssues"]

when data to much,

i see do not use virtual dom, do has a problem when data to many?

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Dependency deprecation warning: babel-preset-es2015 (npm)

On registry https://registry.npmjs.org/, the "latest" version (v6.24.1) of dependency babel-preset-es2015 has the following deprecation notice:

🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!

Marking the latest version of an npm package as deprecated results in the entire package being considered deprecated, so contact the package author you think this is a mistake.

Please take the actions necessary to rename or substitute this deprecated package and commit to your base branch. If you wish to ignore this deprecation warning and continue using babel-preset-es2015 as-is, please add it to your ignoreDeps array in Renovate config before closing this issue, otherwise another issue will be recreated the next time Renovate runs.

Affected package file(s): package.json

Would you like to disable Renovate's deprecation warning issues? Add the following to your config:

"suppressNotifications": ["deprecationWarningIssues"]