developerdizzle / react-virtual-list

Super simple virtualized list React component
http://developerdizzle.github.io/react-virtual-list/
MIT License
617 stars 71 forks source link

Is this supported for react "^16.13.1" as well? #83

Open s-v-d opened 4 years ago

s-v-d commented 4 years ago

I am trying to use this component around a table which is customised by me. I am trying just basic code, which is provided in demo.

const List3 = () => {
  const container = useRef('container')

  const makeItem = (i) => ({
    id: i,
    title: `Media heading #${i + 1}`,
    text:
      'Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.',
  })

  const data = []
  for (let i = 0; i < 100; i++) {
    data[i] = makeItem(i)
  }

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

  const options = {
    container: container, // use this scrollable element as a container
    // initialState: {
    //   firstItemIndex: 0, // show first ten items
    //   lastItemIndex: data.length,  // during initial render
    // },
  }

  const MyVirtualList = VirtualList(options)(MyList)

  return (
    <ul ref={container} style={true ? { overflow: 'scroll', height: 100 } : {}}>
      <MyVirtualList items={data} itemHeight={50} />
    </ul>
  )
}

export default List2

which is giving me the below error. image

Can someone help me that whether this component will work around my custom table component(as it is a bit complex). If not which one can work.. Also why this basic one is not working I am sure. It has been a long that I have spent my time in adding virtual scroll around my compnent.

Thanks in advance.