Multiple intersection hooks to control multiple elements

Question

I'm trying to implement an horizontal scroll with scroll left and right buttons like the one in netflix.

My problem here is refs and hooks being used in multiple items.

I need separate states for separate elements in a group.

I tried using react-intersection-observer but again it's meant to be used with only one element and development becomes absurd when tricked with multiple refs.

const refs = React.useRef<Array<InView | null>>([]);

{
  array.map((service, index) => {
    return (
      <InView
        as="div"
        threshold={1}
        onChange={(inView, entry) => {
         //Manually set the inView state of ref
          refs.current[index]?.setState({ inView: inView });
        }}
        ref={(el: any | null) => (refs.current[index] = el)}
        id={`${index}`}
        key={index}
      >
       <div></div>
      </InView>
    );
  });
}

plus, having to wrap a hole component in another complex component just to check if it's visible to user looked like too much.

Answer 1

You'll have an easier time achieving your goal if you use Material UI Carousel package for example.