Height of item

[rahmatkruniawan]

Can I set height of my item is dynamically.? This depency is good I got more 1000 data is works fine. But when i resize my window to min-wid. If line to ling the go to nextLine so the height of item broken. U say height item can be set with function. If cannt set dynamically can u gift some example to use function for height of item

[clauderic]

You can pass in a function to itemSize which returns the height of an item given its index. Here's a simplified example. In this example, I'm assuming the size of each respective item is already stored in the data array, but you could implement this in many different ways (for example, you could also dynamically measure the size of the items in advance).

import React from 'react';
import {render} from 'react-dom';
import VirtualList from 'react-tiny-virtual-list';

const data = [
  {content: 'A', height: 50},
  {content: 'B', height: 120},
  {content: 'C', height: 80},
  {content: 'D', height: 65},
  {content: 'E', height: 40},
];

function getItemHeight(index) {
  return data[index].height;
}

render(
  <VirtualList
    width='100%'
    height={600}
    itemCount={data.length}
    itemSize={getItemHeight}
    renderItem={({index, style}) =>
      <div key={index} style={style}>
        Letter: {data[index].content}, Row: #{index}
      </div>
    }
  />,
  document.getElementById('root')
);

When the window resizes, you'll need to call the recomputeSizes method on your instance of VirtualList to inform react-tiny-virtual-list that the size of your items have changed and should be re-rendered.

[rahmatkruniawan]

@clauderic thanks for response

[Shaked]

Hey @clauderic,

I hope it's ok I am asking, but how would you do this?

(for example, you could also dynamically measure the size of the items in advance).

I have a huge list which includes items with different heights and the content of the items changes everyday. Therefore I have to figure a way of calculating the heights of each of them.

Thank you! Shaked

[leonidkuznetsov18]

How calculation dynamic height item? I don't have fields height in the object!

[binglinglanyun]

any solution for this?