jwarning Github contribution chart
jwarning Github Stats
jwarning Most Used Languages

Activity

14 Sep 2022

Jwarning

started

Started On 14 Sep 2022 at 09:32:38

Jwarning

New items aren't rendered while scrolling

Here is my code:

import ReactScrollableList from 'react-scrollable-list';

let listItems = []
for (let i = 0; i < 10000; i++) {
  listItems.push({ id: i, content: <div>List Item {i}</div>})
}

function App() {
  return (
    <ReactScrollableList
      listItems={listItems}
    />
  );

}
export default App; 

The page renders with 10 visible elements and it scrolls as expected, but new items do not render.

image

image

What am I doing wrong? The heightOfItem property doesn't seem to do anything either. No matter what I set it to, the height of the elements stays the same.

$ npm --version
6.14.5
$ node --version
v14.4.0 

Forked On 02 Sep 2022 at 02:56:07

Jwarning

In my example code I have this snippet:

 <ReactScrollableList
    listItems={listItems}
    heightOfItem={30}
    maxItemsToRender={20}
    style={{ color: '#333' }}
  />,
  document.getElementById('app')
) 

which will try and mount the element on a div with the id app. Does this exist in your example? If not that may explain the error above.

If the heightOfItem property was not working form you is it possible that some other css style you have is overriding it?

Commented On 02 Sep 2022 at 02:56:07

Jwarning

started

Started On 01 Sep 2022 at 04:24:29

Jwarning

started

Started On 01 Sep 2022 at 01:20:41

Jwarning

New items aren't rendered while scrolling

Here is my code:

import ReactScrollableList from 'react-scrollable-list';

let listItems = []
for (let i = 0; i < 10000; i++) {
  listItems.push({ id: i, content: <div>List Item {i}</div>})
}

function App() {
  return (
    <ReactScrollableList
      listItems={listItems}
    />
  );

}
export default App; 

The page renders with 10 visible elements and it scrolls as expected, but new items do not render.

image

image

What am I doing wrong? The heightOfItem property doesn't seem to do anything either. No matter what I set it to, the height of the elements stays the same.

$ npm --version
6.14.5
$ node --version
v14.4.0 

Forked On 31 Aug 2022 at 05:01:39

Jwarning

Hi there, I have a suspicion it might be due to you missing the heightOfItem={...} property on the ReactScrollableList component. Have a look at the example on the README as it has a working example with an explanation of the props there. Hope that helps!

Commented On 31 Aug 2022 at 05:01:39

Jwarning

started

Started On 25 Aug 2022 at 02:27:19

Jwarning

started

Started On 25 Aug 2022 at 02:26:57

Jwarning

started

Started On 23 Aug 2022 at 02:24:57

Jwarning

started

Started On 17 Aug 2022 at 04:13:58

Jwarning

started

Started On 09 Aug 2022 at 02:57:44

Jwarning

started

Started On 02 Aug 2022 at 08:02:31

Jwarning

started

Started On 29 Jul 2022 at 01:02:26

Jwarning

started

Started On 27 Jul 2022 at 02:53:41

Jwarning

started

Started On 25 Jul 2022 at 10:51:53

Jwarning

started

Started On 25 Jul 2022 at 10:51:07

Jwarning

started

Started On 21 Jul 2022 at 09:33:25

Jwarning

started

Started On 21 Jul 2022 at 09:26:12

Jwarning

started

Started On 19 Jul 2022 at 08:41:25

Jwarning

started

Started On 18 Jul 2022 at 12:24:46
Started

Jwarning

started

Started On 13 Jul 2022 at 06:51:07

Jwarning

started

Started On 06 Jul 2022 at 09:30:22