Useful ‘Infinite Scroll’ React Components & JS Plugins Collection

 

A list of React components and JS plugins to add infinite scrolling functionality to your projects.

Photo by Reuben on Unsplash

When browsing blogs or the news, it’s common to find the infinite scroll function, which is seamless, and no need to refresh the page for more content. The better the user experience, the more customers you end up catching.

There are several React components that can be applied when building your projects.

1. egjs/react-infinitegrid

egjs-infinitegrid/packages/react-infinitegrid at master · naver/egjs-infinitegrid

A module used to arrange card elements including content infinitely on a grid layout. …

github.com

It’s a React component that can arrange items infinitely according to the type of grids.

More demos can be found here:

Storybook

Edit description

naver.github.io

Documentation:

Installation | InfiniteGrid

Using the package managers (recommended)

naver.github.io

Features:

• Fully written in TypeScript.
• Comes with a rich API.
• Inserts infinite items.
• Waits for data loading, data can be added asynchronously.
• Supports IE9+.
• Adds placeholders that can be displayed while waiting for data or restoring status.

2. react-lazyload

GitHub - twobin/react-lazyload: Lazy load your component, image or anything matters the…

This project is now currently maintained by @ameerthehacker, please reach out to him on any issues or help. Lazyload…

github.com

Lazyload your component, image, or anything else where the performance matters.

Demo:

react-lazyload demo

Edit description

twobin.github.io

Features:

• Takes performance in mind, only 2 event listeners for all lazy-loaded components.
• Supports both one-time lazy load and continuous lazy load mode.
• Throttles scroll/resize event handler so you won't suffer frequent updates, you can switch to debounce mode too.
• Supports Decorator.
• Is server-side rendering friendly.
• Is thoroughly tested.

3.react-list

GitHub - caseywebdev/react-list: A versatile infinite scroll React component.

A versatile infinite scroll React component. bower install react-list npm install react-list ReactList depends on…

github.com

A versatile infinite scroll React component.

Demo:

ReactList Examples

Edit description

ca.sey.me

4. af-utils

GitHub - nowaalex/af-utils: React components for rendering large scrollable data

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…

github.com

React components for rendering large scrollable data.

Documentation:

Getting started | af-utils

When you need to render a list, table or grid with a lot of rows or columns, you may face performance problems. A lot…

af-utils.vercel.app

Features:

• All dimensions are calculated automatically, so there is no need to provide them.
• Uses position: sticky for tables.
• mobx — ready
• Is optimized for performance.
• scrollTo(index, smooth = false) method is available.

5. react-window

GitHub - bvaughn/react-window: React components for efficiently rendering large lists and tabular…

React components for efficiently rendering large lists and tabular data React window works by only rendering part of a…

github.com

React components for efficiently rendering large lists and tabular data.

Documentation:

react-window

Edit description

react-window.vercel.app

Features:

• It reduces the amount of work (and time) required to render the initial view and process updates.
• It reduces the memory footprint by avoiding the over-allocation of DOM nodes.

6. infinite scroll

GitHub - metafizzy/infinite-scroll: 📜 Automatically add next page

See infinite-scroll.com for complete docs and demos. Link directly to Infinite Scroll files on unpkg. npm: npm install…

github.com

Infinite Scroll is a JavaScript plugin that automatically adds the next page, saving users from a full page load. You’ve likely seen it in use all over the web.

Documentation:

Infinite Scroll

New! JavaScript and jQuery plugin to automatically add next pages.

infinite-scroll.com

Features:

• Back-button friendly.
• Easy start, powerful build, works out-of-the-box with any blog or WordPress site.
• Versatile UI.
• Masonry, isotope, and puckery.

7. ScrollMagic

GitHub - janpaepke/ScrollMagic: The javascript library for magical scroll interactions.

The javascript library for magical scroll interactions. - GitHub - janpaepke/ScrollMagic: The javascript library for…

github.com

The JavaScript library for magical scroll interactions.

Documentation:

ScrollMagic

ScrollMagic helps you to easily react to the user's current scroll position. It's the perfect library for you, if you…

scrollmagic.io

Features:

• Optimized performance.
• Lightweight (6KB gzipped).
• Flexibility and extensibility.
• Mobile compatibility.
• Event management.
• Support for responsive web design.
• Object-oriented programming and object chaining.
• Readable, centralized code, and intuitive development.
• Support for both scroll directions (even different on one page).
• Support for scrolling inside div containers (even multiple on one page).
• Extensive debugging and logging capabilities.
• Detailed documentation.
• Many application examples.

Summary:

Good documented React component: af-utils, react-window, and egjs/react-infinitegrid.

For JS users, the infinite scroll is an easy-to-use but paid service. the Scrollmagic is nice to try.

Keep up doing what you want. Say hi to all of us on the road to the peak.
Please follow and be my study buddy. Peace.✌️