React-overwatch 🌀

React component using the browser's Intersection Observer API to watch for when an element is within (or intersecting with) the viewport.

Installation

yarn add react-overwatch

Usage

import React, { Component } from 'react'
import Observable from 'react-overwatch'

const options = {
  // IntersectionObserver options
  root: null,
  rootMargin: '0px',
  threshold: 0.5,
}

class SomeComponent extends Component {
  onEnter = () => {
    console.log('Element in viewport 🎉🎉')
  }

  onLeave = () => {
    console.log('Element out of viewport 😓😓')
  }

  onIntersection = () => {
    console.log('Some action on element intersection ⚛️⚛️')
  }

  render() {
    return (
      <Observable
        options={options}
        onIntersection={this.onIntersection}
        onEnter={this.onEnter}
        onLeave={this.onLeave}
      >
        <div>I am a observable item 👀</div>
      </Observable>
    )
  }
}

Adding the polyfill to your site

Note: For complete browser support you must also provide an Intersection Observer polyfill.

The examples below show various ways to add the IntersectionObserver polyfill to your site.

yarn add intersection-observer

Using <script> tags in the HTML:

<!-- Load the polyfill first. -->
<script src="path/to/intersection-observer.js"></script>

<!-- Load all other JavaScript. -->
<script src="app.js"></script>

Using a module loader (e.g. Browserify or Webpack):

import 'intersection-observer'

Using only for required browsers:

if (typeof window !== 'undefined' && typeof window.IntersectionObserver === `undefined`) {
  import(`intersection-observer`)
}

Browser Support

Intersection Observer is pretty well supported by major browsers, with the exception of Safari/iOS Safari. There's also not been much movement by the Safari team to add support. This is unfortunate but adding a good polyfill will work great for adding support to Safari or IE11. You can track Safari's lack of progress here.

Examples

Basic example

Infinite scroll example