Hooks!

This release enables support for the useInView(ref, options) hook. The library will work fine with older versions of React, as long as you don't use the execute the hook.

import { useRef } from 'react'
import { useInView } from 'react-intersection-observer'

const Component = () => {
  const ref = useRef()
  const inView = useInView(ref, {
    /* Optional options */
    threshold: 0,
  })

  return (
    <div ref={ref}>
      <h2>{`Header inside viewport ${inView}.`}</h2>
    </div>
  )
}

The release also refactors the Rollup build, which should result in a more optimized bundle.

Throw error if trying to observe element twice

This is a fix for #119

Babel 7

This release updates Babel and Rollup, and publishes the new output files.

Keep plain children

Due to popular demand (#91), I'll keep support for rendering plain children inside the <Observer />.

This release just removes the deprecation flag. You don't need to change anything.

Simpler times

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.

Keep on rolling

Switch the build system to Rollup, so the package now contains an umd, CommonJS and ES optimized build. 🎉

This shouldn't change anything if you are already using the package, but if you imported the files in dist directly then that won't work anymore

Render Props with refs

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>} />

v4.0.0

Fix tests by mocking invariant

v3.0.1

This fixes #53

Render Prop Pattern

The render prop pattern recently became a popular replacement for the child as function pattern.

Previously the render prop on react-intersection-observer, was handled differently from children so it only rendered when the element was inside the viewport.

⚠️ Breaking change

If you were using the render prop before, you need to handle when to render the content.

Old way

<Observer render={() => <div>Only rendered when in viewport</div>} />

New way

<Observer render={inView => inView ? <div>Only rendered when in viewport</div> : null} />