thebuilder/react-intersection-observer v4.0.1

Render Props with refs

on GitHub

No more wrapping div element! render now gives complete control over the rendering, making it easier to use while keeping HTML semantic

import Observer from 'react-intersection-observer'

const Component = () => (
  <Observer
    render={({ inView, ref }) => (
      <div ref={ref}>
        <h2>{`Header inside viewport ${inView}.`}</h2>
      </div>
    )}
  />
)

export default Component

⚠️ Breaking change

• Removed innerRef
• Changed render callback arguments

This release breaks the render prop, so it differs from the child as function method.
If you used the render method before, and you were happy with, you can move the function to children.
Otherwise, you'll need to handle the new ref and assign it to a HTMLElement.

Old way

<Observer render={inView => <h2>Inview {inView}</h2>} />

New way

<Observer render={({inView, ref}) => <div ref=ref><h2>Inview {inView}</h2></div>} />