React-Window with dynamic list dimensions

Question

I'm trying to add react-window to my stack, however all examples require the width and height of the list to be statically defined like this:

import { FixedSizeList as List } from 'react-window';
 
const Column = ({ index, style }) => (
  <div style={style}>Column {index}</div>
);
 
const Example = () => (
  <List
    height={75}
    itemCount={1000}
    itemSize={100}
    layout="horizontal"
    width={300}
  >
    {Column}
  </List>
);

In my current code, the width and height are defined as follows:

 <div
                style={{
                    overflowY: 'scroll',
                    height:
                        width >= 600 &&
                        (isFirefox() ? '100%' : '-webkit-fill-available'),
                    width: isFirefox()
                        ? '-moz-available'
                        : '-webkit-fill-available',
                }}
            >
                {items.map(item => <MyItem ... />}

           </div>

As you can see, my width and height are defined as 100% or webkit-fill-available.

How can I adapt this to make it work with react-window or react-virtualized?

Mohamed Ashraf · Accepted Answer · 2022-08-14 06:59:27Z

0

I would suggest using the same logic as className in react-window, so we are going to write it like :

const Example = () => (
  <List
    height={75}
    itemCount={1000}
    itemSize={100}
    layout="horizontal"
    width={300}
    className={isFirefox() ? 'FirefoxClass' : 'anotherStyle'}
  >
    {Column}
  </List>
);

answered Aug 14, 2022 at 6:59

Mohamed Ashraf

745 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-Window with dynamic list dimensions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related