Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-infi-scroller
Advanced tools
Readme
React-based infinite scroll component that just works. It supports window
and scrollable nodes, without inline style for height.
To install the component, run:
npm install react-infi-scroller
To import the component in your project:
import InfiScroller from 'react-infi-scroller';
Use InfiScroller
on the window object:
import React, { useState } from 'react';
import InfiScroller from 'react-infi-scroller';
const MyComponent = () => {
const generateItems = (items = [], length = 30) => {
const nextItems = [...items];
for (let i = 0; i < length; i += 1) {
nextItems.push(items.length + i);
}
return nextItems;
};
const [items, setItems] = useState(generateItems());
const [hasMore, setHasMore] = useState(true);
return (
<InfiScroller
hasMore={hasMore}
onLoadMore={() => {
const nextItems = generateItems(items);
setItems(nextItems);
setHasMore(nextItems.length < 300);
}}
>
<ul>
{items.map((item) => (
<li
key={item}
style={{ height: 100 }}
>
{`Item ${item}`}
</li>
))}
</ul>
</InfiScroller>
);
};
Use InfiScroller
on a custom scroll target (like a modal):
import React, { useState, useRef } from 'react';
import InfiScroller from 'react-infi-scroller';
const MyComponent = () => {
const generateItems = (items = [], length = 30) => {
const nextItems = [...items];
for (let i = 0; i < length; i += 1) {
nextItems.push(items.length + i);
}
return nextItems;
};
const [items, setItems] = useState(generateItems());
const [hasMore, setHasMore] = useState(true);
const refComponent = useRef(null);
return (
<div ref={refComponent}>
<InfiScroller
scrollTarget={refComponent.current}
hasMore={hasMore}
onLoadMore={() => {
const nextItems = generateItems(items);
setItems(nextItems);
setHasMore(nextItems.length < 300);
}}
>
<ul>
{items.map((item) => (
<li
key={item}
style={{ height: 100 }}
>
{`Item ${item}`}
</li>
))}
</ul>
</InfiScroller>
</div>
);
};
Use multiple InfiScroller
components with custom scroll targets:
import React, { useState, useRef } from 'react';
import InfiScroller from 'react-infi-scroller';
const MyComponent = () => {
const generateItems = (items = [], length = 30) => {
const nextItems = [...items];
for (let i = 0; i < length; i += 1) {
nextItems.push(items.length + i);
}
return nextItems;
};
const [items, setItems] = useState(generateItems());
const [hasMore, setHasMore] = useState(true);
const [otherItems, setOtherItems] = useState(generateItems());
const [hasMoreOther, setHasMoreOther] = useState(true);
const refItemsWrapper = useRef(null);
const refOtherItemsWrapper = useRef(null);
/* Styles for the scroll targets used below
<style>
.items-scroller {
height: 300px;
overflow: auto;
background-color: white;
}
.other-items-scroller {
height: 500px;
margin-top: 40px;
overflow: auto;
background-color: white;
}
</style>
*/
return (
<div>
<div
ref={refItemsWrapper}
className="items-scroller"
>
<InfiScroller
scrollTarget={refItemsWrapper.current}
hasMore={hasMore}
onLoadMore={() => {
const nextItems = generateItems(items);
setItems(nextItems);
setHasMore(nextItems.length < 300);
}}
>
<ul>
{items.map((item) => (
<li
key={item}
style={{ height: 100 }}
>
{`Item ${item}`}
</li>
))}
</ul>
</InfiScroller>
</div>
<div
ref={refOtherItemsWrapper}
className="other-items-scroller"
>
<InfiScroller
scrollTarget={refOtherItemsWrapper.current}
hasMore={hasMoreOther}
onLoadMore={() => {
const nextOtherItems = generateItems(otherItems);
setOtherItems(nextOtherItems);
setHasMoreOther(nextOtherItems.length < 120);
}}
>
<ul>
{otherItems.map((otherItem) => (
<li
key={otherItem}
style={{ height: 100 }}
>
{`Other Item ${otherItem}`}
</li>
))}
</ul>
</InfiScroller>
</div>
</div>
);
};
Use InfiScroller
with a spinner/loader:
import React, { useState } from 'react';
import InfiScroller from 'react-infi-scroller';
const MyComponent = () => {
const generateItems = (items = [], length = 30) => {
const nextItems = [...items];
for (let i = 0; i < length; i += 1) {
nextItems.push(items.length + i);
}
return nextItems;
};
const [items, setItems] = useState(generateItems());
const [hasMore, setHasMore] = useState(true);
return (
<InfiScroller
hasMore={hasMore}
onLoadMore={() => {
const nextItems = generateItems(items);
setItems(nextItems);
setHasMore(nextItems.length < 300);
}}
>
<ul>
{items.map((item) => (
<li
key={item}
style={{ height: 100 }}
>
{`Item ${item}`}
</li>
))}
</ul>
{hasMore && (
<span>Loading...</span>
)}
</InfiScroller>
);
};
Name | Type | Default | Description |
---|---|---|---|
children | Node | NodeList | The content in the infinite scroller. Contains the list of items you want to trigger infinite scrolling for. | |
scrollTarget | Node | null | The scroll target. Can be set to a custom scrollable node or omitted/null. When omitted/null the window object is used as scroll target. |
debounceDelay | Number | 300 | Debounce delay (in milliseconds) to optimize high-frequency scroll events. A recommended delay of 300 milliseconds is set by default. |
gutter | Number | 10 | Additional space (in pixels) used in the default shouldLoadMore calculation. Increasing it will cause the onLoadMore callback to be called before the scrollbar has reached the bottom of the scrollTarget . The larger the number, the earlier the onLoadMore callback will be called. A recommended minimum gutter of 10 pixels is set by default. |
immediate | Boolean | false | Whether to trigger an initial check, before any scroll event, if onLoadMore callback should be called. Set it to true when you want onLoadMore to be called immediately after the scrollTarget is mounted. This can be useful in case the scrollbar has been preset to the bottom of the scrollTarget or the content of the scrollTarget is less than its height and no scroll exist for it yet. |
active | Boolean | true | Turn on/off the infinite scroller. Keeps the component's children visible. Attaches event listeners when set to true . Detaches event listeners when set to false . Useful when the infinite scroller is placed inside a modal and you want it disabled until the modal is activated. |
hasMore | Boolean | false | Whether there are more items to load. This flag is used to determine if onLoadMore should be called. The entire check looks like this hasMore && shouldLoadMore(...) . |
shouldLoadMore | ( scrollTargetHeight: number, scrollYOffset: number, gutter: number, scrollHeight: number ) => boolean | ( scrollTargetHeight, scrollYOffset, gutter, scrollHeight ) => ( scrollTargetHeight + scrollYOffset + gutter >= scrollHeight ) | Determine if more items should be loaded. By default a scrollTargetHeight + scrollYOffset + gutter >= scrollHeight formula is used. Provide a different function to customize this behavior. Note that shouldLoadMore will be called only if hasMore is true . |
onLoadMore | () => void | Called when hasMore && shouldLoadMore(...) is true . You should load and render more items in the infinite scroller when onLoadMore is called. |
FAQs
React-based infinite scroll component
The npm package react-infi-scroller receives a total of 29 weekly downloads. As such, react-infi-scroller popularity was classified as not popular.
We found that react-infi-scroller demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.