twobin/react-lazyload

Attempting to use refs with scrollContainer?

JPedrys opened this issue · 0 comments

Hello, I have been trying to use scrollContainer to attach the scroll event listener to a scrollable material ui table component, but I am a little confused about what the correct way to do this is with functional components (I have been reading that using a query selector string in a functional component like this isn't ideal, although I haven't gotten that to work either). I have done quite a bit of asking around and searching for solutions to this and still have not come up with anything. I will attach some simplified code to hopefully help understand what I am trying to achieve.

export default function StickyHeadTable() {
/some vars here
return (

/this is the scrollable container I need to reference on the
/scrollContainer in my LazyLoad component below

<StyledTableRow tabIndex={-1} style={{ verticalAlign: 'top' }}>


{data.map((data) =>

<LazyLoad scrollContainer={how can I use refs here?} height={200} offset={200}> /this is where I /need to reference the scrollable element to attach the scroll event listener to
/displaying pieces of data here


)}






);

In this code example the scrollable container I need to reference inside my LazyLoad component is the tag, how would I go about adding that ref to scrollContainer?

Thanks, I appreciate any help I can get with this.