Releases: thebuilder/react-intersection-observer
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
rendercallback 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
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.