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

v0.3.0

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

Fixes: #10

v0.2.13

Fix #8 - Merge usage of isIntersecting with intersectionRatio.

v0.2.12

Removed debugging console.log

v0.2.10

Fixes #7 by removing usage of isIntersecting