This package has been deprecated

Author message:

Deprecated in favor of react-intersection-observer

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

API

useIntersect({ onEnter, [onExit], element, [options] })

onEnter([entry])

A function which is called when elements start intersecting.

onExit([entry])

A function which is called when elements stop intersecting.

element

Target element to watch.

options

See Intersection Observer#Parameters for available options.

Prior art

on-intersect

Read more

Intersection Observer API

License

MIT