Add padding-top in react-virtualized <List />

Question

I have a <List /> component where I want to add an initial padding-top to the wrapper. Since all the elements are absolute positioned I found this solution but I wonder if it's right or is there another solution less expensive:

const rowRenderer = ({ index, key, style, isScrolling }) => {
// ...

return (
  <ul key={key}
    style={{
      ...style,
      top: style.top + 50,
    }}>
    { items.map(itemRenderer) }
  </ul>
)

}

The related part is the style prop.

Answer 1

You can avoid the unnecessary object-creation and spread operation by moving the padding to the level of the List, eg:

<List
  {...props}
  style={{
    paddingTop: '50px',
    boxSizing: 'content-box',
  }}
  containerStyle={{
    position: 'relative',
    overflow: 'visible'
  }}
/>

See an example of this here: https://plnkr.co/edit/vNHDmpEY2bjQbCup4xsG?p=preview