npmpackage.info

Gathering detailed insights and metrics for react-infinite-scroller

Other packages similar to react-infinite-scroller

@types/react-infinite-scroller

1.2.5

TypeScript definitions for react-infinite-scroller

react-masonry-infinite

1.2.2

React component for masonry infinite grid. Based on Bricks.js, React Infinite Scroller and React Masonry Layout.

react-loading-infinite-scroller

1.5.1

Wrapper of react-infinite-scroller to shape better with a loading request list rendering

@larryyangsen/react-infinite-scroller

1.2.6

Infinite scroll component for React in ES6

Gathering detailed insights and metrics for react-infinite-scroller

react-infinite-scroller

⏬ Infinite scroll component for React in ES6

1.2.6

3,298

MIT

JavaScript

2.22 kB

86,328,679 3.6

Installations

npm install react-infinite-scroller

Pull Requests

Open

21

Total

110

Closed

44

Merged

45

Issues

Open

76

Total

198

Closed

122

Releases

v1.2.6

Published on 13 Apr 2022

v1.2.5

Published on 09 Feb 2022

1.2.4

Published on 24 Dec 2018

1.2.3

Published on 23 Dec 2018

1.2.2

Published on 10 Oct 2018

1.2.1

Published on 14 Sept 2018

View all 11 releases

Developer

danbovey

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

Typescript Support

No

Node Version

14.17.2

NPM Version

6.14.13 Statistics

3,298 Stars

257 Commits

509 Forks

21 Watching

2 Branches

1 Contributors

Updated on 25 Nov 2024

Bundle Size

6.56 kB

Minified

2.22 kB

Minified + Gzipped

Bundlephobia

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

86,328,679

Last day

14.1%

82,855

Compared to previous day

Last week

10.5%

409,837

Compared to previous week

Last month

12.9%

1,678,810

Compared to previous month

Last year

7.4%

18,795,907

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

React Infinite Scroller

Infinitely load a grid or list of items in React. This component allows you to create a simple, lightweight infinite scrolling page or element by supporting both window and scrollable elements.

⏬ Ability to use window or a scrollable element
📏 No need to specify item heights
💬 Support for "chat history" (reverse) mode
✅ Fully unit tested and used in hundreds of production sites around the world!
📦 Lightweight alternative to other available React scroll libs ~ 2.2KB minified & gzipped

Installation

npm install react-infinite-scroller --save

yarn add react-infinite-scroller

How to use

1import InfiniteScroll from 'react-infinite-scroller';

Window scroll events

1<InfiniteScroll
2    pageStart={0}
3    loadMore={loadFunc}
4    hasMore={true || false}
5    loader={<div className="loader" key={0}>Loading ...</div>}
6>
7    {items} // <-- This is the content you want to load
8</InfiniteScroll>

DOM scroll events

1<div style="height:700px;overflow:auto;">
2    <InfiniteScroll
3        pageStart={0}
4        loadMore={loadFunc}
5        hasMore={true || false}
6        loader={<div className="loader" key={0}>Loading ...</div>}
7        useWindow={false}
8    >
9        {items}
10    </InfiniteScroll>
11</div>

Custom parent element

You can define a custom parentNode element to base the scroll calulations on.

1<div style="height:700px;overflow:auto;" ref={(ref) => this.scrollParentRef = ref}>
2    <div>
3        <InfiniteScroll
4            pageStart={0}
5            loadMore={loadFunc}
6            hasMore={true || false}
7            loader={<div className="loader" key={0}>Loading ...</div>}
8            useWindow={false}
9            getScrollParent={() => this.scrollParentRef}
10        >
11            {items}
12        </InfiniteScroll>
13    </div>
14</div>

Props

Name	Required	Type	Default	Description
`children`	Yes	`Node`		Anything that can be rendered (same as PropType's Node)
`loadMore`	Yes	`Function`		A callback when more items are requested by the user. Receives a single parameter specifying the page to load e.g. `function handleLoadMore(page) { /* load more items here */ }` }
`element`		`Component`	`'div'`	Name of the element that the component should render as.
`hasMore`		`Boolean`	`false`	Whether there are more items to be loaded. Event listeners are removed if `false`.
`initialLoad`		`Boolean`	`true`	Whether the component should load the first set of items.
`isReverse`		`Boolean`	`false`	Whether new items should be loaded when user scrolls to the top of the scrollable area.
`loader`		`Component`		A React component to render while more items are loading. The parent component must have a unique key prop.
`pageStart`		`Number`	`0`	The number of the first page to load, With the default of `0`, the first page is `1`.
`getScrollParent`		`Function`		Override method to return a different scroll listener if it's not the immediate parent of InfiniteScroll.
`threshold`		`Number`	`250`	The distance in pixels before the end of the items that will trigger a call to `loadMore`.
`useCapture`		`Boolean`	`false`	Proxy to the `useCapture` option of the added event listeners.
`useWindow`		`Boolean`	`true`	Add scroll listeners to the window, or else, the component's `parentNode`.

Troubleshooting

Double or non-stop calls to `loadMore`

If you experience double or non-stop calls to your loadMore callback, make sure you have your CSS layout working properly before adding this component in. Calculations are made based on the height of the container (the element the component creates to wrap the items), so the height of the container must equal the entire height of the items.

1.my-container {
2  overflow: auto;
3}

Some people have found success using react-infinite-scroll-component.

But you should just add an `isLoading` prop!

This component doesn't make any assumptions about what you do in terms of API calls. It's up to you to store whether you are currently loading items from an API in your state/reducers so that you don't make overlapping API calls.

1loadMore() {
2  if(!this.state.isLoading) {
3    this.props.fetchItems();
4  }
5}

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

6

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

82 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-hc9w-4p87-j549
Warn: Project is vulnerable to: GHSA-wg6g-ppvx-927h
Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c
Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-fvqr-27wr-82fm
Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3
Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7
Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-rq8g-5pc5-wrhr
Warn: Project is vulnerable to: GHSA-h6ch-v84p-w6p9
Warn: Project is vulnerable to: GHSA-qh2h-chj9-jffq
Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-fhjf-83wg-r2j9
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-6394-6h9h-cfjg
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp
Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr
Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3

Score

3.6

/10

Last Scanned on 2024-11-25

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-infinite-scroller

Other packages similar to react-infinite-scroller

react-infinite-scroller

Installations

Pull Requests

21

110

44

45

Issues

76

198

122

Releases

Developer

Developer Guide

CommonJS

No

14.17.2

6.14.13

Statistics

Bundle Size

6.56 kB

2.22 kB

Languages

Total Downloads

86,328,679

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React Infinite Scroller

Installation

How to use

Window scroll events

DOM scroll events

Custom parent element

Props

Troubleshooting

Double or non-stop calls to loadMore

But you should just add an isLoading prop!

10

10

10

6

3

0

0

0

0

0

0

0

3.6

/10

Double or non-stop calls to `loadMore`

But you should just add an `isLoading` prop!