I try to build a custom carousel where I need to know when the items in the carousel are in view and when not.
Therefore I tried to use useInView Hook from react-intersection-observer. But I don't know how I could implement a solution where I need to create as many useInView as I have {children} in the component.
What works in dev environment is the following:
let observer = new Array();
children.forEach(() => {
observer.push(useInView({ threshold: 0.25}))
})
But that doesn't work in prod anymore, since rules of hooks that you only can call hooks on top level of a function component.
I though I found a hint to the solution here: https://stackoverflow.com/a/68223312/10949467 but I'm not able to figure out how to adapt this to a dynamic scenario.
Can anyone help me to find a solution how I could create a dynamic amount of useInView Hooks based on the amount of children on the top-level of my function component?
