---
search:
  exclude: true
changelog:
  category: Release
  version: 4.0.1
date: '2018-05-14T09:04:09Z'
seo:
  description: >-
    No more wrapping div element! render now gives complete control over the
    rendering, making it easier to use while keeping HTML semantic Removed…
title: Render Props with refs
type: changelog
---
No more wrapping `div` element! `render` now gives complete control over the rendering, making it easier to use while keeping HTML semantic

```jsx
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**
```jsx
<Observer render={inView => <h2>Inview {inView}</h2>} />
```

**New way**
```jsx
<Observer render={({inView, ref}) => <div ref=ref><h2>Inview {inView}</h2></div>} />
```