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

Updated Typescript definitions

Thanks to @Kovensky for correcting the definitions.

Added Typescript Definition

Thanks to @forabi

Going with the Flow

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.

v1.0.0

Added support for all the IntersectionObserver options! 🎉

This closes #18