practical examle of using inview with mapped elements

[uyriq]

It is quite clear how to use inview to track the position of an element on the screen when scrolling. But what if there is more than one such element? refN is not convenient. What if these elements are generated using map? what is called

1. https://github.com/thebuilder/react-intersection-observer#how-can-i-assign-multiple-refs-to-a-component and what is called multiple observers?
2. https://react-intersection-observer.vercel.app/?path=/docs/inview-component--multiple-observers unfortunately, both mentions lack a practical example of use on codesandbox.io or codepen

[mcgrealife]

@uyriq here is an example #460

Basically create a Wrapper component that manages its own hook, and return the Wrapper in the map function

Edited based on @thebuilder reply:

const ParentComponent = () => {
// do not use the hook in parent! 

return (
  <div>
    ['your','data'].map((d, index) => (
      <Wrapper key={index} />
    ))
  </div>
)
}

// create a Wrapper component, use the hook here instead
const Wrapper = () => {
   const { ref, inView, entry } = useInView()
  
  useEffect(() => {
    inView && console.log('do something')
  },[inView])
  
  return (
  <div ref={ref}>
  The element that needs the refN
  </div>
  )
}

[mcgrealife]

@uyriq also, this can be achieved with the <InView /> component, which creates the ref for you (no need to create a Wrapper component).

import { InView } from 'react-intersection-observer'

const ParentComponent = ( ) => {
 
return (
  <div>
    ['your','data'].map((d, index) => (
        <InView 
        onChange={
        (inView, entry ) => console.log(InView, entry)
        } 
        />
          <div>The element that needs the refN</div>
        </InView>
    ))
  </div>
)
}

The <InView /> callback returns an object of type

{
  inView: boolean, 
  entry: IntersectionObserverEntry
}

The entry object contains a target div that you can use to access information about the InView element.

---

One way to pass data is using the data attribute on the div element (mdn).

Here is the same example as above, using the div's data attribute:

import { InView } from 'react-intersection-observer'

const [myString, setMyString] = React.useState()

const ParentComponent = ( ) => {

return (
  <div>
    ['your','data'].map((d, index) => (
        <InView 
        onChange={
        (inView, entry ) => console.log(entry.target.attributes.getNamedItems('data').value)
        } 
        key={index}
        />
          <div data={d} >The element that needs the refN</div>
        </InView>
    ))
  </div>
)
}

Alternatively, for simple cases, passing data via the div's id value is easier to access from target

['your','data'].map((d, index) => (
  <InView onChange={(inView, entry) => console.log(entry.target.id} key={index}>
    <div id="d">
  </InView>
  )

[thebuilder]

@uyriq here is an example #460

Basically create a Wrapper component that manages its own hook, and return the Wrapper in the map function

const ParentComponent = () => {
  // do not use the hook in parent!
 
  // create a Wrapper component, use the hook here instead
  const Wrapper = () => {
     const { ref, inView, entry } = useInView()
  
    useEffect(() => {
      inView && console.log('do something')
    },[inView])
  
    return (
    <div ref={ref}>
    The element that needs the refN
    </div>
    )
}

return (
  <div>
    ['your','data'].map((d, index) => (
      <Wrapper key={index} />
    ))
  </div>
)
}

Yes, keep you inView contained to the individual components whenever possible.

Just a note - Never create a component (e.g. Wrapper) inside another component. It will cause the component to be recreated on each render. Instead, define the component at the root of the file.

[mcgrealife]

Wow @thebuilder much appreciated! I updated the original reply.