Custom React Hook to provide an abstraction for IntersectionObserver
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Serra Allgood 2bc6683ff0 Bump version 3 months ago
src See CHANGELOG 3 months ago
.gitignore Update config files 3 months ago
.npmignore Update config files 3 months ago
CHANGELOG.md See CHANGELOG 3 months ago
CODE_OF_CONDUCT.md Initial Commit 3 months ago
LICENSE Change license to Blue Oak Model License 3 months ago
POLITICS.md Update POLITICS.md 3 months ago
README.md Fix SSR issues 3 months ago
babel.config.js See CHANGELOG 3 months ago
jest.config.js Update config 3 months ago
package-lock.json See CHANGELOG 3 months ago
package.json Bump version 3 months ago
tsconfig.json See CHANGELOG 3 months ago

README.md

react-useintersection

Description

react-useintersection is a custom React Hook that allows for initializing IntersectionObserver on any node ref. With the IntersectionanchorObserver returned from the hook, components can be styled on the fly or related JavaScript behavior can be triggered.

Be aware of the browser compatiblity of IntersectionObserver, namely that IE11 does not support it. If necessary, consider using the intersection-observer package for a polyfill.

Installation

npm i 'react-useintersection'

Usage

Here’s an example of how you can use IntersectionObserver to track when the user has scrolled from the top of the page, but this is just a simple example of how powerful IntersectionObserver is. Visit the MDN docs for ideas, including lazy loading of images, infinite scrolling, and others.

This specific example is how the author of this package achieves a menu bar that is transparent while at the top of the page and transitions to opaque when the user scrolls down. Check out the source of xer site to get the full context including CSS.

import React, { useEffect, useRef } from 'react'
import useIntersection from 'react-useintersection'

import MenuBar from './MenuBar'

const Layout = ({ children }) => {
  const anchor = useRef(null)
  const [setNode, anchorObserver] = useIntersection()

  useEffect(() => {
    setNode(anchor.current)
  })

  return (
    <>
      <div id="top-of-page-anchor" ref={anchor} />
      <MenuBar isAtTop={anchorObserver.isIntersecting} />
      {children}
    </>
  )
}

Astute readers may be concerned about memory leaks; efforts have been made to nip potential leaks in the bud, namely by using [node, options.root, options.rootMargin, options.threshold] as the second argument within the useEffect of useIntersection.

License

Implementation based on code samples by Justin Travis Waith-Mair from his Medium article and used with permission. All original code is released under the Blue Oak Model License, a copyleft written with the intent to be a more legally defensible version of the MIT license.

Contributing

Contributions are welcome in the form of reporting issues and submitting pull requests. Contributors agree to follow the Code of Conduct outlined in CODE_OF_CONDUCT.md.