useScrolledPastThreshold

The useScrolledPastThreshold Hook allows you to determine whether the user has scrolled past a certain threshold on the page.

Here's an example:

import { useState, useEffect } from 'react'

function useScrolledPastThreshold(threshold) {
  const [scrolledPastThreshold, setScrolledPastThreshold] = useState(false)

  useEffect(() => {
    function handleScroll() {
      if (window.pageYOffset >= threshold) {
        setScrolledPastThreshold(true)
      } else {
        setScrolledPastThreshold(false)
      }
    }

    window.addEventListener('scroll', handleScroll)

    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [threshold])

  return scrolledPastThreshold
}

function MyComponent() {
  const scrolledPastThreshold = useScrolledPastThreshold(500)

  return (
    <div>
      {scrolledPastThreshold ? (
        <p>You have scrolled past the threshold!</p>
      ) : (
        <p>Scroll down to see the magic happen</p>
      )}
    </div>
  )
}

In this example, we define a useScrolledPastThreshold Hook that takes a threshold and returns a boolean indicating whether the user has scrolled past that threshold on the page. We use the useState Hook to create a scrolledPastThreshold state variable and the useEffect Hook to add a scroll event listener to the window that updates the scrolledPastThreshold state variable based on the current scroll position. We also use the useEffect Hook to clean up the event listener when the threshold changes. Inside our component, we render a message based on the scrolledPastThreshold state variable.

codesandbox Example