ngx-infinite-scroll vs ngx-virtual-scroller vs react-infinite-scroll-component vs react-virtualized vs react-window vs vue-virtual-scroller
Infinite Scroll and Virtual Scrolling Libraries
Search packages..
ngx-infinite-scrollngx-virtual-scrollerreact-infinite-scroll-componentreact-virtualizedreact-windowvue-virtual-scrollerSimilar Packages:

Infinite Scroll and Virtual Scrolling Libraries

These libraries provide solutions for implementing infinite scrolling and virtual scrolling in web applications, enhancing the user experience by efficiently loading and displaying large datasets without overwhelming the browser. Infinite scrolling allows users to continuously load more content as they scroll down, while virtual scrolling optimizes rendering by only displaying the items currently in view, significantly improving performance and responsiveness in applications with extensive lists or grids.

Npm Package Weekly Downloads Trend

3 Years

Github Stars Ranking

Stat Detail

Package
Downloads
Stars
Size
Issues
Publish
License
ngx-infinite-scroll01,25370.3 kB166 months agoMIT
ngx-virtual-scroller0985-1536 years agoMIT
react-infinite-scroll-component03,085217 kB134an hour agoMIT
react-virtualized027,0722.24 MB4a year agoMIT
react-window017,187209 kB14 months agoMIT
vue-virtual-scroller010,770461 kB19617 days agoMIT

Feature Comparison: ngx-infinite-scroll vs ngx-virtual-scroller vs react-infinite-scroll-component vs react-virtualized vs react-window vs vue-virtual-scroller

Integration

  • ngx-infinite-scroll:

    Seamlessly integrates with Angular's lifecycle and change detection, making it easy to implement and manage within Angular applications.

  • ngx-virtual-scroller:

    Designed specifically for Angular, it leverages Angular's features to provide a smooth integration experience for developers.

  • react-infinite-scroll-component:

    Offers a simple API that works well with both class and functional components, making it versatile for different React project structures.

  • react-virtualized:

    Provides a rich set of components designed for complex use cases, integrating well with existing React applications and offering extensive customization options.

  • react-window:

    Lightweight and easy to integrate into any React application, focusing on performance with minimal configuration required.

  • vue-virtual-scroller:

    Built for Vue.js, it integrates well with Vue's reactivity system, allowing developers to implement virtual scrolling effortlessly.

Performance Optimization

  • ngx-infinite-scroll:

    Optimizes loading of additional content only when the user scrolls near the bottom of the page, reducing unnecessary data fetching and improving performance.

  • ngx-virtual-scroller:

    Efficiently manages rendering by only displaying items in the viewport, significantly reducing the number of DOM nodes and improving rendering speed.

  • react-infinite-scroll-component:

    Uses a threshold to determine when to load more items, ensuring that the application remains responsive even with large datasets.

  • react-virtualized:

    Highly optimized for performance, it minimizes re-renders and efficiently manages large datasets with features like windowing and dynamic row heights.

  • react-window:

    Focuses on rendering only the visible portion of lists, leading to improved performance in applications with extensive data sets.

  • vue-virtual-scroller:

    Efficiently renders only the visible items in a list, reducing memory usage and improving the overall performance of Vue applications.

Ease of Use

  • ngx-infinite-scroll:

    Simple to set up with minimal configuration, making it accessible for developers new to Angular or infinite scrolling.

  • ngx-virtual-scroller:

    Provides a straightforward API that is easy to understand, allowing developers to implement virtual scrolling quickly.

  • react-infinite-scroll-component:

    Designed for ease of use, it requires minimal setup and provides clear documentation for quick implementation.

  • react-virtualized:

    While powerful, it has a steeper learning curve due to its extensive features, requiring more time to master.

  • react-window:

    Offers a simple API that is easy to learn, making it suitable for developers looking for a quick solution to virtual scrolling.

  • vue-virtual-scroller:

    User-friendly with a clear API, allowing Vue developers to implement virtual scrolling without a steep learning curve.

Customizability

  • ngx-infinite-scroll:

    Allows customization of loading indicators and thresholds, giving developers flexibility in how infinite scrolling behaves.

  • ngx-virtual-scroller:

    Highly customizable, enabling developers to define item sizes and customize rendering behavior for different use cases.

  • react-infinite-scroll-component:

    Provides props for customizing loading behavior and thresholds, allowing for tailored user experiences.

  • react-virtualized:

    Extensive customization options for rendering components, row heights, and more, catering to complex application needs.

  • react-window:

    Offers basic customization for item rendering, focusing on simplicity while still allowing for some degree of flexibility.

  • vue-virtual-scroller:

    Customizable item rendering and sizes, making it adaptable for various use cases in Vue applications.

Community and Support

  • ngx-infinite-scroll:

    Supported by a growing community of Angular developers, with documentation and examples available for assistance.

  • ngx-virtual-scroller:

    Has a dedicated user base within the Angular community, providing resources and support for developers.

  • react-infinite-scroll-component:

    Well-documented with a robust community, making it easy to find solutions and examples for common issues.

  • react-virtualized:

    A mature library with extensive documentation and a strong community, offering numerous resources for troubleshooting and implementation.

  • react-window:

    Backed by the same community as react-virtualized, it benefits from shared knowledge and resources, ensuring good support.

  • vue-virtual-scroller:

    Supported by the Vue community, with documentation and examples readily available for developers.

How to Choose: ngx-infinite-scroll vs ngx-virtual-scroller vs react-infinite-scroll-component vs react-virtualized vs react-window vs vue-virtual-scroller

  • ngx-infinite-scroll:

    Choose ngx-infinite-scroll if you are working with Angular and need a straightforward solution for infinite scrolling that integrates seamlessly with Angular's change detection and lifecycle hooks.

  • ngx-virtual-scroller:

    Select ngx-virtual-scroller for Angular applications where you need to efficiently render large lists or grids by only displaying items in the viewport, reducing memory usage and improving performance.

  • react-infinite-scroll-component:

    Opt for react-infinite-scroll-component if you are using React and want an easy-to-implement infinite scrolling solution that supports both functional and class components with customizable loading indicators.

  • react-virtualized:

    Choose react-virtualized for complex React applications that require a comprehensive set of features for rendering large lists and tables, including support for fixed headers, variable row heights, and dynamic loading.

  • react-window:

    Select react-window for a lightweight alternative to react-virtualized, ideal for simple use cases where you need efficient rendering of large lists with minimal overhead and a straightforward API.

  • vue-virtual-scroller:

    Use vue-virtual-scroller if you are developing with Vue.js and need a performant solution for rendering long lists or grids, providing a simple API to manage virtual scrolling.

Similar Npm Packages to ngx-infinite-scroll

ngx-infinite-scroll is an Angular directive that provides an easy way to implement infinite scrolling in your applications. It allows developers to load more content as the user scrolls down the page, enhancing the user experience by reducing loading times and improving performance. While ngx-infinite-scroll is a great solution for Angular applications, there are several alternatives available for React and Vue.js that offer similar functionality. Here are a few noteworthy options:

  • react-infinite-scroll-component is a popular library for implementing infinite scrolling in React applications. It provides a simple and customizable way to load more content as the user scrolls down. With features like customizable loading indicators and the ability to handle both scroll and touch events, this library is a great choice for developers looking to enhance their React applications with infinite scrolling capabilities.

  • react-infinite-scroller is another React library that simplifies the implementation of infinite scrolling. It allows developers to specify a load function that is triggered when the user reaches the bottom of the scrollable area. This library is lightweight and easy to use, making it a good option for projects that require basic infinite scrolling functionality without the overhead of more complex libraries.

  • react-virtualized is a powerful library for efficiently rendering large lists and tabular data in React applications. While it is primarily focused on virtualization, it also includes features for infinite scrolling. If your application requires handling large datasets with optimal performance, react-virtualized is an excellent choice, as it minimizes the number of DOM elements rendered at any given time.

  • react-window is a smaller and more lightweight alternative to react-virtualized, designed for rendering large lists and grids. It provides a simple API for implementing infinite scrolling and is optimized for performance. If you need a straightforward solution for rendering large lists with infinite scrolling, react-window is a great option.

  • vue-infinite-loading is a Vue.js component that provides infinite scrolling functionality. It allows developers to easily implement infinite loading in their Vue applications, with customizable loading indicators and event handling. This library is perfect for Vue developers looking to enhance their applications with seamless infinite scrolling.

  • vue-virtual-scroller is another Vue.js library that focuses on efficiently rendering large lists. It offers virtual scrolling capabilities, which can be combined with infinite loading to create a smooth user experience when dealing with extensive datasets. If your Vue application requires both virtualization and infinite scrolling, vue-virtual-scroller is an excellent choice.

To see how these packages compare, check out the comparison link: Comparing ngx-infinite-scroll, react-infinite-scroll-component, react-infinite-scroller, react-virtualized, react-window, vue-infinite-loading, vue-virtual-scroller.

Similar Npm Packages to ngx-virtual-scroller

ngx-virtual-scroller is an Angular library designed to efficiently render large lists of items by only displaying the items that are currently visible in the viewport. This approach, known as "virtual scrolling," significantly improves performance and user experience, especially when dealing with extensive datasets. While ngx-virtual-scroller is a robust solution for Angular applications, there are several alternatives available for different frameworks. Here are a few notable options:

  • ngx-infinite-scroll is another Angular library that provides an easy way to implement infinite scrolling in your applications. Unlike virtual scrolling, which focuses on rendering only the visible items, infinite scrolling loads more items as the user scrolls down the page. This is particularly useful for scenarios where data is fetched from an API in chunks. If your application requires a seamless loading experience as users scroll, ngx-infinite-scroll is a great choice.

  • react-infinite-scroll-component is a popular library for React applications that enables infinite scrolling functionality. It allows developers to easily implement a loading mechanism that fetches more data as the user scrolls down. This library is straightforward to use and integrates well with existing React components, making it an excellent option for React developers looking to enhance their applications with infinite scrolling capabilities.

  • react-virtualized is a comprehensive library for React that provides a suite of components for efficiently rendering large lists and tabular data. It includes features for both virtual scrolling and infinite scrolling, making it a versatile choice for developers who need to handle extensive datasets. react-virtualized is particularly beneficial for applications that require complex data structures and advanced rendering techniques.

  • react-window is a smaller, more lightweight alternative to react-virtualized, focusing solely on virtual scrolling. It is designed to be easy to use and highly performant, making it an excellent choice for React applications that need to render long lists without the overhead of additional features. If you want a simple and efficient solution for virtual scrolling, react-window is worth considering.

  • vue-virtual-scroller is a library for Vue.js applications that implements virtual scrolling. Similar to ngx-virtual-scroller, it efficiently renders only the items in view, improving performance for large lists. If you are working with Vue and need a solution for virtual scrolling, vue-virtual-scroller provides a straightforward and effective way to manage large datasets.

To explore the differences and similarities among these packages, check out the comparison: Comparing ngx-infinite-scroll vs ngx-virtual-scroller vs react-infinite-scroll-component vs react-virtualized vs react-window vs vue-virtual-scroller.

Similar Npm Packages to react-infinite-scroll-component

react-infinite-scroll-component is a popular library for implementing infinite scrolling in React applications. It allows developers to easily create a seamless user experience by loading more content as the user scrolls down the page. This is particularly useful for applications that display large lists of data, such as social media feeds, product listings, or image galleries. The library is designed to be simple to use, providing a straightforward API that integrates well with existing React components.

While react-infinite-scroll-component is a solid choice for infinite scrolling, there are other libraries that also offer similar functionality. However, in this case, the alternatives are limited as the mentioned package is quite specialized.

For a comprehensive comparison, you can refer to the following link: Comparing react-infinite-scroll-component vs react-infinite-scroll-component.

Similar Npm Packages to react-virtualized

react-virtualized is a powerful library for efficiently rendering large lists and tabular data in React applications. It provides a set of components that help optimize rendering performance by only displaying the items that are currently visible in the viewport, thereby reducing the number of DOM nodes and improving overall performance. While react-virtualized is a popular choice for virtualization, there are several alternatives available in the React ecosystem. Here are a few noteworthy options:

  • react-infinite is a library designed for creating infinite scrolling lists in React applications. It allows developers to easily implement a scrolling mechanism that loads more items as the user scrolls down. While it focuses on infinite scrolling, it does not provide the same level of virtualization as react-virtualized, making it suitable for scenarios where you want to load more data dynamically without the need for complex virtualization logic.
  • react-list is a lightweight library that provides a simple way to render large lists in React. It offers a virtualized list component that efficiently renders only the visible items, similar to react-virtualized. However, react-list is designed to be more straightforward and easier to use, making it a good choice for developers who want a simple solution for rendering large lists without the overhead of more complex libraries.
  • react-tiny-virtual-list is a minimalistic virtualized list component for React. It aims to provide a lightweight and efficient way to render large lists while maintaining a small bundle size. If you're looking for a simple and efficient solution for virtualizing lists without the additional features and complexity of larger libraries, react-tiny-virtual-list is an excellent option.
  • react-window is another lightweight library for rendering large lists and tabular data in React. It is a smaller and simpler alternative to react-virtualized, focusing on performance and ease of use. React-window provides a set of components for efficiently rendering lists and grids while keeping the API straightforward and intuitive. If you need a more minimalistic approach to virtualization, react-window is a great choice.

For a detailed comparison of these libraries, check out: Comparing react-infinite vs react-list vs react-tiny-virtual-list vs react-virtualized vs react-window.

Similar Npm Packages to react-window

react-window is a lightweight library for efficiently rendering large lists and tabular data in React applications. It provides a simple API for creating virtualized lists, allowing developers to render only the visible items in a list, which significantly improves performance and reduces memory consumption. This is particularly useful for applications that need to display long lists of items without compromising on performance.

While react-window is a powerful solution for virtualization, there are several alternatives in the React ecosystem that also provide similar functionalities. Here are a few noteworthy options:

  • react-infinite is a library designed for creating infinite scrolling lists in React applications. It allows developers to load more items as the user scrolls down, making it ideal for scenarios where data is fetched in chunks. react-infinite is particularly useful for applications that require continuous loading of data without pagination, providing a smooth user experience.
  • react-list is another library for rendering large lists in React. It offers a simple API for creating virtualized lists and supports features like dynamic item heights and variable item sizes. react-list is a good choice for developers who need flexibility in rendering lists with varying item dimensions while maintaining performance.
  • react-virtual is a lightweight library that provides a simple way to implement virtual scrolling in React applications. It focuses on performance and ease of use, allowing developers to create virtualized lists with minimal configuration. If you are looking for a straightforward solution to handle large lists without the overhead of more complex libraries, react-virtual is a great option.
  • react-virtualized is a comprehensive library for efficiently rendering large lists, tables, and grids in React. It offers a wide range of features, including support for fixed headers, cell rendering, and dynamic row heights. While it is more feature-rich than react-window, it may also come with a steeper learning curve. If your application requires advanced virtualization features, react-virtualized is worth considering.
  • react-window-infinite-loader is an extension of react-window that adds infinite loading capabilities to virtualized lists. It allows developers to easily implement infinite scrolling while benefiting from the performance optimizations of react-window. This library is perfect for applications that need both virtualization and infinite scrolling in a seamless manner.

To see how these libraries compare, check out the comparison: Comparing react-infinite vs react-list vs react-virtual vs react-virtualized vs react-window vs react-window-infinite-loader.

Similar Npm Packages to vue-virtual-scroller

vue-virtual-scroller is a library designed for Vue.js applications that allows developers to efficiently render large lists or tables by only displaying the items that are currently visible in the viewport. This technique, known as "virtual scrolling," significantly improves performance and reduces rendering times, especially when dealing with extensive datasets. By using vue-virtual-scroller, developers can create smooth and responsive user interfaces without compromising on performance.

While vue-virtual-scroller is an excellent choice for Vue applications, there are several alternatives available for different frameworks. Here are a few notable options:

  • ngx-virtual-scroller is a virtual scrolling library specifically designed for Angular applications. It provides a similar functionality to vue-virtual-scroller, allowing developers to efficiently render large lists and tables in Angular projects. By using ngx-virtual-scroller, Angular developers can enhance the performance of their applications and ensure a smooth user experience, even with extensive datasets. Its integration with Angular's change detection system makes it a seamless choice for Angular developers looking to implement virtual scrolling.

  • react-virtualized is a widely used library for React applications that provides a set of components for efficiently rendering large lists and tables. It offers a variety of features, including windowing, lazy loading, and cell measurement, making it a powerful tool for developers dealing with extensive datasets. react-virtualized is highly customizable and can be tailored to fit various use cases, making it an excellent choice for React developers who need advanced virtual scrolling capabilities.

  • react-window is a lightweight alternative to react-virtualized, designed to provide similar functionality with a simpler API. It focuses on performance and ease of use, making it an ideal choice for developers who want to implement virtual scrolling without the overhead of additional features. react-window is particularly well-suited for projects where simplicity and performance are paramount, allowing developers to quickly set up virtual scrolling in their React applications.

To explore how these libraries compare, check out the comparison: Comparing ngx-virtual-scroller vs react-virtualized vs react-window vs vue-virtual-scroller.

README for ngx-infinite-scroll

Build Status Backers on Open Collective Sponsors on Open Collective npm version npm version npm downloads a month npm downloads a week

Consider Becoming a sponsor

Angular Infinite Scroll

versions now follow Angular's version to easily reflect compatibility.
Meaning, for Angular 10, use ngx-infinite-scroll @ ^10.0.0

Angular - Older Versions Support

Starting Angular 6 and Above - ngx-infinite-scroll@THE_VERSION.0.0
For Angular 4 and Angular = ^5.5.6 - use version ngx-infinite-scroll@0.8.4
For Angular 5.x with rxjs =<5.5.2 - use version ngx-infinite-scroll@0.8.3
For Angular version <= 2.3.1, you can use npm i angular2-infinite-scroll (latest version is 0.3.42) - please notice the angular2-infinite-scroll package is deprecated

Used By

and much more.

These analytics are made available via the awesome Scarf package analytics library

Opt-Out Of Scarf

Scarf can be disabled by following these directions

Front End Consulting Services

I'm a Senior Front End Engineer & Consultant at Orizens. My services include:

  • Angular/React/Javascript Consulting
  • Front End Architecture Consulting
  • Project Code Review
  • Project Development

Contact Here

Webpack and Angular

Installation

npm install ngx-infinite-scroll --save

Supported API

Properties

@Input()TypeRequiredDefaultDescription
infiniteScrollDistancenumberoptional2the bottom percentage point of the scroll nob relatively to the infinite-scroll container (i.e, 2 (2 * 10 = 20%) is event is triggered when 80% (100% - 20%) has been scrolled). if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event.
infiniteScrollUpDistancenumberoptional1.5should get a number
infiniteScrollThrottlenumberoptional150should get a number of milliseconds for throttle. The event will be triggered this many milliseconds after the user stops scrolling.
scrollWindowbooleanoptionaltruelistens to the window scroll instead of the actual element scroll. this allows to invoke a callback function in the scope of the element while listenning to the window scroll.
immediateCheckbooleanoptionalfalseinvokes the handler immediately to check if a scroll event has been already triggred when the page has been loaded (i.e. - when you refresh a page that has been scrolled)
infiniteScrollDisabledbooleanoptionalfalsedoesn't invoke the handler if set to true
horizontalbooleanoptionalfalsesets the scroll to listen for horizontal events
alwaysCallbackbooleanoptionalfalseinstructs the scroller to always trigger events
infiniteScrollContainerstring / HTMLElementoptionalnullshould get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty.
fromRootbooleanoptionalfalseif infiniteScrollContainer is set, this instructs the scroller to query the container selector from the root of the document object.

Events

@Output()TypeEvent TypeRequiredDescription
scrolledEventEmitterIInfiniteScrollEventoptionalthis will callback if the distance threshold has been reached on a scroll down.
scrolledUpEventEmitterIInfiniteScrollEventoptionalthis will callback if the distance threshold has been reached on a scroll up.

Behavior

By default, the directive listens to the window scroll event and invoked the callback.
To trigger the callback when the actual element is scrolled, these settings should be configured:

  • [scrollWindow]="false"
  • set an explict css "height" value to the element

DEMO

Try the Demo in StackBlitz

Usage

In this example, the onScroll callback will be invoked when the window is scrolled down:

import { Component } from '@angular/core';
import { InfiniteScrollDirective } from 'ngx-infinite-scroll';

@Component({
  selector: 'app',
  template: `
    <div
      class="search-results"
      infiniteScroll
      [infiniteScrollDistance]="2"
      [infiniteScrollThrottle]="50"
      (scrolled)="onScroll()"
    ></div>
  `,
  imports: [InfiniteScrollDirective]
})
export class AppComponent {
  onScroll() {
    console.log('scrolled!!');
  }
}

in this example, whenever the "search-results" is scrolled, the callback will be invoked:

import { Component } from '@angular/core';
import { InfiniteScrollDirective } from 'ngx-infinite-scroll';

@Component({
  selector: 'app',
  styles: [
    `
      .search-results {
        height: 20rem;
        overflow: scroll;
      }
    `,
  ],
  template: `
    <div
      class="search-results"
      infiniteScroll
      [infiniteScrollDistance]="2"
      [infiniteScrollThrottle]="50"
      (scrolled)="onScroll()"
      [scrollWindow]="false"
    ></div>
  `,
  imports: [InfiniteScrollDirective]
})
export class AppComponent {
  onScroll() {
    console.log('scrolled!!');
  }
}

In this example, the onScrollDown callback will be invoked when the window is scrolled down and the onScrollUp callback will be invoked when the window is scrolled up:

import { Component } from '@angular/core';
import { InfiniteScroll } from 'ngx-infinite-scroll';

@Component({
  selector: 'app',
  directives: [InfiniteScroll],
  template: `
    <div
      class="search-results"
      infiniteScroll
      [infiniteScrollDistance]="2"
      [infiniteScrollUpDistance]="1.5"
      [infiniteScrollThrottle]="50"
      (scrolled)="onScrollDown()"
      (scrolledUp)="onScrollUp()"
    ></div>
  `,
})
export class AppComponent {
  onScrollDown() {
    console.log('scrolled down!!');
  }

  onScrollUp() {
    console.log('scrolled up!!');
  }
}

In this example, the infiniteScrollContainer attribute is used to point directive to the scrollable container using a css selector. fromRoot is used to determine whether the scroll container has to be searched within the whole document ([fromRoot]="true") or just inside the infiniteScroll directive ([fromRoot]="false", default option).

import { Component } from '@angular/core';
import { InfiniteScrollDirective } from 'ngx-infinite-scroll';

@Component({
  selector: 'app',
  styles: [
    `
      .main-panel {
        height: 100px;
        overflow-y: scroll;
      }
    `,
  ],
  template: `
    <div class="main-panel">
      <div
        infiniteScroll
        [infiniteScrollDistance]="2"
        [infiniteScrollThrottle]="50"
        [infiniteScrollContainer]="selector"
        [fromRoot]="true"
        (scrolled)="onScroll()"
      ></div>
    </div>
  `,
  imports: [InfiniteScrollDirective]
})
export class AppComponent {
  selector: string = '.main-panel';

  onScroll() {
    console.log('scrolled!!');
  }
}

It is also possible to use infiniteScrollContainer without additional variable by using single quotes inside double quotes:

[infiniteScrollContainer]="'.main-panel'"

Showcase Examples

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

npm-compare.com is an independent website designed to help developers choose the most suitable npm packages. We are not affiliated with npm, Inc, the official website for the npm registry. Note that npm is a registered trademark of npm, Inc. Please share your feedback via our GitHub repository. For more details, please refer to our Terms & Privacy.