use-window-scroll-hook

React Hook to monitor window scroll event.

Install

npm install --save use-window-scroll-hook

or

yarn add use-window-scroll-hook

Usage

updates only when user stops scrolling

import React, { Component } from 'react'

import useWindowScroll from 'use-window-scroll-hook'

const App = () => {
  const {
    scrollX,
    scrollY,
  } = useWindowScroll();

  return (
    <>
      <p>
        {`Scroll X: ${scrollX}`}
      </p>
      <p>
        {`Scroll Y: ${scrollY}`}
      </p>
    </>
  )
}

updates continuously, at every scroll event

import React, { Component } from 'react'

import useWindowScroll from 'use-window-scroll-hook'

const App = () => {
  const {
    scrollX,
    scrollY,
  } = useWindowScroll(false);

  return (
    <>
      <p>
        {`Scroll X: ${scrollX}`}
      </p>
      <p>
        {`Scroll Y: ${scrollY}`}
      </p>
    </>
  )
}

License

MIT © pedro-lb

This hook is created using create-react-hook.