thebuilder/react-intersection-observer v6.0.0

Simpler times

on GitHub

Looking at how i'm currently using react-intersection-observer, and how render props have been adapted by React, this release moves all rendering to to the children prop.

The way to use the component is to forward the ref to your outer element, giving you full control over the DOM.

import Observer from 'react-intersection-observer'

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

export default Component

⚠️ Breaking changes

• Deprecated renderprop
• Deprecated tag prop
• Deprecated child as React.Node

They will still work for now, but you'll get a deprecation warning unless NODE_ENV is production.

If you are currently using render, you can move the method directly to children.