react-intersection-observer

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

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

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

Thanks to @Kovensky for correcting the definitions.

Switched to using Flow to type check all the code. There shouldn't be any breaking changes, but there has been some internal bug fixes that was caught after enabling Flow.

Added support for all the IntersectionObserver options! 🎉

This closes #18

Removed the Intersection Observer polyfill - You need to add it manually to your project.

Fixes: #10

Fix #8 - Merge usage of isIntersecting with intersectionRatio.

Removed debugging console.log

Fixes #7 by removing usage of isIntersecting