React-on-intersect NPM

react-on-intersect

React hook to do something when two elements intersect.

Hooks are an upcoming feature that lets you use state and other React features without writing a class. They’re currently in React v16.7.0-alpha.

Demo

Infinite Scroll

Installation

npm install react-on-intersect

Usage

import React, { useRef } from 'react'
import useIntersect from 'react-on-intersect'

export default function Example () {
  const element = useRef(null)

  function onEnter () {
    console.log('Hi!')
  }

  function onExit () {
    console.log('Bye!')
  }

  useIntersect({ onEnter, onExit, element })

  return (
    <>
      <h1
        ref={element}
        style={{ marginTop: '110vh', textAlign: 'center', fontSize: '4em' }}
      >
        Hello, Intersect!
      </h1>
    </>
  )
}