htmlreactjsreact-window

react-window giving a class to innermost div


I can't find how to give a class to innermost div in react-window. In my case a have a flex wrapper containing list of data divs. But because react-window's innermost div separates my wrapper and list items I cannot properly align my list items. Is there a workaround either to access to innermost div and change it's class or directly to manipulate it's style.

Here is what react-window produces me as html.

<div style="position: relative; height: 600px; width: 100%; overflow: auto; will-change: transform; direction: ltr;">
<div style="height: 31900px; width: 100%;"> // ***here is where I want to style or give a class because there should be a flex wrapper here*** 
    <div id="0" class="card product-card"><a class="product-title" href="/">
    </div>
    <div id="1" class="card product-card"><a class="product-title" href="/">
    </div>
    <div id="2" class="card product-card"><a class="product-title" href="/">
    </div>
    <div id="3" class="card product-card"><a class="product-title" href="/">
    </div>
</div>

Thanks!


Solution

  • You can customize inner element and rows of each element

    const Row = ({ index, style }) => (
      <div
        className={index % 2 === 0 ? "RowEven" : "RowOdd"}
        style={{
          ...style,
          top: `${parseFloat(style.top) + PADDING_SIZE}px`
        }}
      >
        item {index}
      </div>
    );
    
    const Example = () => (
      <List
        className="List"
        height={150}
        innerElementType={innerElementType}
        itemCount={51}
        itemSize={ITEM_SIZE}
        width={300}
      >
        {Row}
      </List>
    );
    
    const innerElementType = forwardRef(({ style, ...rest }, ref) => (
      <div
        ref={ref}
        style={{
          ...style,
          height: `${parseFloat(style.height) + PADDING_SIZE * 2}px`
        }}
        {...rest}
        className="innerClass"
      />
    ));
    

    here is Code sandbox example