Comments (13)
Here's my workaround InfiniteScroll component, using IntersectionObserver:
interface InfiniteScrollProps {
load: () => void;
hasMore: boolean;
loader: React.ReactNode;
children?: React.ReactNode;
endMessage?: React.ReactNode;
}
export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
load,
hasMore,
loader,
children,
endMessage,
}) => {
const sentinelRef = useRef<HTMLDivElement>(null);
const observerRef = useRef<IntersectionObserver | null>(null);
const handleIntersect = useCallback(
(
entries: IntersectionObserverEntry[],
observer: IntersectionObserver
) => {
// Check if the sentinel element is intersecting, and if so, call the load function
if (entries[0].isIntersecting && hasMore) {
load();
}
},
[load]
);
useEffect(() => {
// Create a new IntersectionObserver when the component mounts
observerRef.current = new IntersectionObserver(handleIntersect, {
root: null,
rootMargin: "0px",
threshold: 1.0,
});
// Attach the observer to the sentinel element
if (sentinelRef.current) {
observerRef.current.observe(sentinelRef.current);
}
// Clean up the observer when the component unmounts
return () => {
if (observerRef.current) {
observerRef.current.disconnect();
}
};
}, [load]);
useEffect(() => {
// When the hasMore prop changes, disconnect the previous observer and reattach it to the new sentinel element
if (observerRef.current && sentinelRef.current) {
observerRef.current.disconnect();
observerRef.current.observe(sentinelRef.current);
}
}, [hasMore]);
return (
<div>
{children}
<div ref={sentinelRef}>{hasMore && loader}</div>
{!hasMore && endMessage}
</div>
);
};
from react-infinite-scroll-component.
I avoided using this library since it has this major bug open and it has not yet solved.
Instead of this I used IntersectionObserver and implemented the functionality of this library myself.
from react-infinite-scroll-component.
@finishedcoot I still have this issue. What's the fix?
from react-infinite-scroll-component.
@finishedcoot I'm having the same issue? What's the fix?
from react-infinite-scroll-component.
@finishedcoot How could I use your fork without having yarn installed?
from react-infinite-scroll-component.
@techwithanirudh @tofiqquadri Temporarily you can install the package by changing your package.json
to be like this and reinstall the module.
But I recommend to change it back after the maintainer fixed this issue ASAP.
"react-infinite-scroll-component": "git+https://github.com/Stacrypt/react-infinite-scroll-component",
from react-infinite-scroll-component.
hola yo pude resolver el hecho que no llame a la función "next", lo que me daba error era usar el componente dentro de una etiqueta que usara "Overflow: auto"
from react-infinite-scroll-component.
acabe de revisar bien la documentación y hace falta el "scrollableTarget" con eso ya pude usar el "Overflow: auto"
from react-infinite-scroll-component.
I am too waiting on this!
from react-infinite-scroll-component.
I'm having the same issue!
from react-infinite-scroll-component.
I'm having the same issue!
my workaround was just to fetch enough data for single page OR have each item card large enough to fit scroll.. OR load more manually(not waiting for scroll to reach the bottom) based on height
from react-infinite-scroll-component.
Issue still persists. See this codepen for example: https://codesandbox.io/s/amazing-hermann-x2qw8m?file=/src/index.js
Unfortunately this cripples the library for anything besides simple/single-page infinite scroll apps.
from react-infinite-scroll-component.
You can workaround this issue with a hook, check the following response
from react-infinite-scroll-component.
Related Issues (20)
- Scroll Both Direction (bidirectional infinite scroll) HOT 3
- Integration with Headless UI popover not working as expected.
- Block is appearing during scroll HOT 1
- Number 0 appears when finish loading message appears HOT 1
- `scrollableTarget` throws error `Type 'HTMLElement' is not assignable to type 'ReactNode'` in React 18 HOT 3
- Inverse does not work if you do not set a specific height
- can not working in shadowDOM
- react-infinite-scroll-component is no longer maintained HOT 3
- The component is not working after a certain amount of items in the list
- Don't loading new content, if initial content height <= screen height HOT 4
- Please modify the npm docs and mention that for the dataLength prop we need to pass the actual length of the data that we are currently rendering.
- TypeError on latest Next.js HOT 4
- Bidirectional Infinite Scroll HOT 2
- Wrong calculation in isElementAtTop method causing percentage scrollThreshold to fail in inverse mode HOT 1
- Invalid Hook call on SetProgress -> 100%
- is this library supported horizontal scroll?
- 【IMPORT FOR EVERYONE】HOW TO FIX:Don't load new items when content height <= screen height
- Possibility to pass throttle time as props
- How can I change the scrollY when the InfiniteScroll has rendered HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-infinite-scroll-component.