Using Semantic UI React with React Virtualized

Question

I have been having difficulties getting React Virtualized working correctly with Semantic UI.

As per my example below, I am able to get correct styling applied to the items in a list by setting the className prop to 'item'.

However the issue I have been having is with props passed from Semantic's HOC components such as List to a List.Item. Props such as divided and selection. Has anyone else run into this issue and is there a solution?

https://codesandbox.io/s/31l6ol4kkm

score 0 · Answer 1 · answered Jan 11 '18 at 15:10

You won't be able to pass the List properties from Semantic UI to your List.Item inside of your React-Virtualized list because the properties are not accepted by react-virtualized Lists. The nesting you are doing is preventing you from achieving the outcome you want. However, you can create a custom style sheet to pass to your List.Item. One example that worked for me would be to use the following code:

const dividedStyle = {
  borderBottom:"1px solid #ccc",
  margin:"5px",
  padding:"5px"
}
const rowRenderer = ({ key, index, style }) => (
  <List.Item key={key} style={dividedStyle}>
    <List.Content>
      <List.Header>
        {items[index]}
      </List.Header>
      Is a person
      <List.Description>
        Description
      </List.Description>
    </List.Content>
  </List.Item>
)

There may be other ways to do this, but this works well. You could also wrap your VList and List.Item rendering in a separate component, to which you would pass the "Divided" property. You could style it inside that component which would then encapsulate the code above, and give you a reusable VList & List.Item combo.

Using Semantic UI React with React Virtualized

1 Answers1