New syntax as an HOC

[developerdizzle]

Experimenting with a new architecture as an HOC. I like this as it gives more control to the consumer. One question I've been thinking about is which options, if any, to use as HOC parameters vs properties?

// the HOC

import VirtualList from 'react-virtual-list';

// your component

const MyList = ({
  virtual,
  itemHeight,
}) => (
  <ul style={virtual.style}>
    {virtual.items.map((item) => (
      <li key={`item${item.id}`} style={{height: itemHeight }}>
        Lorem ipsum dolor sit amet
      </li>
    ))}
  </ul>
);

// using the HOC - which options, if any, should go in here?

const options = {
  scrollThrottle: 1000,
};

const MyVirtualList = VirtualList(options)(MyList);

// rendering - which options should be props here?

<MyVirtualList
  items={myBigListOfItems}
  container={window}
  itemBuffer={0}
  itemHeight={100}
/>