1

I am using library called react-window

It's library for efficiently rendering large lists and tabular data.

this is example code from the docs:

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const Example = () => (
  <List
    height={150}
    itemCount={1000}
    itemSize={35}
    width={300}
  >
    {Row}
  </List>
);

What I want to do is wrap the {Row} with <div> or any other custom components.

Because I want to implement some styling and also collapse transition.

Note that, I cannot simply do this:

const Row = ({ index, style }) => (
   <div style={{...}}> // wrapper
      <div style={style}>Row {index}</div>
   </div>
);

Because it will wrap every single list-item with wrapper component, instead of wrap a whole lists with single wrapper component.

I want to wrap a whole lists with single wrapper component.

Bens
  • 831
  • 4
  • 12
  • 28
  • It would be helpful if you could show a specific example of what you are trying to do. Perhaps share a [CodeSandbox](https://codesandbox.io/s/new) demonstrating the look/functionality you want using a few rows of hard-coded data without using react-window. – Ryan Cogswell Jul 22 '19 at 21:42
  • 2
    It's pretty obvious what he wants, if you read. I think the burden for asking a question is becoming tiresome. He wants to wrap a whole list in a single wrapper element which he can style, e.g. classes and ids. – jhchnc Jan 16 '20 at 18:21
  • 3
    Did someone find a solution? – Myzel394 Dec 04 '20 at 14:52
  • Why can't it go on the outside of the List component? – Michael Cook Mar 27 '21 at 01:35

0 Answers0