Stack Overflow
Stack Overflow

Questions tagged [react-infinite-scroll-component]

48 questions
1
vote
2 answers

Array is not updating using `slice()` by 10 every 5 secs in functional component in reactjs

I tried to use react-infinite-scroll-component to get an infinite scrolling effect. However, the arr is updating but updating as full length array at the end. And, I want it to update as slicing by 10 (like first 10, then 10, ...) till length of…
nuser137
  • 401
  • 2
  • 8
1
vote
0 answers

How to apply list virtualization using React window when infinite scroll is implemented using React-Query

I am making a news app and I have implemented infinite scroll using React Query. But my cocern was as more and more dom elements get added to the dom because of infinite scroll the dom gets heavy . To solve this I wanted to implement List…
Moumita Dhar
  • 31
  • 4
1
vote
0 answers

react-infinite-scroll-component with multiple columns

I'm creating an app that shows a gallery of images (varying heights). I implemented the infinite scroll with 4 columns (masonry effect). But whenever I scroll down and the fetchMore function is called, the new images that are added to the gallery…
rlatmfrl
  • 17
  • 4
1
vote
0 answers

Is there any way to do Bi-directional Infinite scrolling in React?

I am using react-infite-scroll-component and react-virtuoso for inverse infinite scrolling in real-time chat app. And the problem is when when chat has more than 100 unread messages, then it's more difficult to display all unread messages at a…
bjjnarola
  • 11
  • 1
1
vote
0 answers

React Infinite Scroll Jumps to the top on Next Page

I have this component in React Infinite Scroll Component {!loading && data && (
Missak Boyajian
  • 1,965
  • 7
  • 32
  • 59
1
vote
0 answers

React infinite scroll component auto call data without scrolling

Hi I had been try to perform infinite scrolling in React JS but i got problem when try to scroll to next page. The next keyword in infinitescroll will direct call the API multiple times. Below show as my current code. // States and call API const […
Dirty Rex
  • 13
  • 4
1
vote
1 answer

How to get the index of items visible in the viewport?

folks, I am building a chat app. Currently, I am working on a feature in which when the user scrolls a sticky date is shown to the top, based on the date of the messages visible in the viewport area. But I don't know how to get the index of the last…
Ayush Kumar
  • 494
  • 1
  • 6
  • 21
1
vote
0 answers

React Lazy loading and infinite scoll to top

I am currently working on a messaging platform and previously, we just load all the messages at once as there are not that many messages. Now that that there are many messages, it is starting to take a long time to load everything. As such, I would…
Mervyn
  • 11
  • 3
1
vote
1 answer

i want my react component to load more data when i scroll to half of my screen

I am creating an React project where i am rendering the data by calling the api, and api every time gives me array of data of length 10. i am using react-infinite-scroll-component for using infinite scrolling functionality. i want to load data…
Geetanjali Katare
  • 55
  • 1
  • 9
1
vote
0 answers

React infinite scrolling

I'm trying to do an infinite scrolling with react components, I tried to use react-infinite-scroll-component npm package but it seems to doesn't fit with my project. I need to have 2 map function to display the content of the infinite scrolling in…
ogtm
  • 259
  • 1
  • 2
  • 10
1
vote
0 answers

Firestore duplicating data in react-infinite-scroll-component

I have a problem with data duplication in the firestore. I'm creating an infinite scroll with the react-infinite-scroll-component webpack. I'm having problems with the calls from the firestore, I can return all items with pagination following the…
Joao Paulo Gardiano
  • 27
  • 1
  • 5
1
vote
1 answer

React infinite-scroll with array from hook state

I'm having troubles to set up react-infinite-scroller within my React component. I do not want to fetch data via an API directly in my component with loadMore because I already got it from my IndexedDB. So I want to use my Array dbScans (array with…
mrks
  • 5,439
  • 11
  • 52
  • 74
0
votes
0 answers

react-infinite-scroll-component not triggering fetchMoreData function to fetch new Post when scrolled down

I am currently working on an app to fetch more posts and am currently using react-infinite-scroll-component. My Layout is structured in this format The header ._dashboard__header{ max-height: 8rem; /* height: 10vh; */ padding: 1rem…
Orisfina
  • 59
  • 9
0
votes
0 answers

Mongoose skip and limit. Generate limit dynamically provides infinite data

I have the problem that when I have reached the end of my data, Mongoose continues to provide me with data.If I constantly set the limit to 11, everything works. But I want to create the limit dynamically. export async function POST(request) { const…
Captai-N
  • 1,124
  • 3
  • 15
  • 26
0
votes
0 answers

Get the new data from the api and render further into the react typescript list

Here is my api: const getTransactionsCashD = async (staff_id: string, page: number) => { setLoading(true); const httpClient = getHttpClient(); try { const { data } = await httpClient.get<{}>( …
seventeen
  • 3
  • 2
1
2
3 4