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