React useScroll hook (window scrolling) returns scrollX & scrollY, with context provider

useScroll.jsx

import React from 'react'

const ScrollContext = React.createContext(null)

export function useScroll() {
  const scroll = React.useContext(ScrollContext)

  if (!scroll)
    throw new Error('Please make sure ScrollContextProvider is available')
  return scroll
}

export function ScrollContextProvider({ children }) {
  const scroll = useRawScroll()
  return (
    <ScrollContext.Provider value={scroll}>{children}</ScrollContext.Provider>
  )
}

export const useRawScroll = () => {
  const [scrollX, setScrollX] = React.useState(0)
  const [scrollY, setScrollY] = React.useState(0)
  // Performance optimization, see: http://www.html5rocks.com/en/tutorials/speed/animations/
  let lastKnownScrollX = scrollX
  let lastKnownScrollY = scrollY
  let ticking = false

  React.useEffect(() => {
    if (window) window.addEventListener('scroll', handleScroll)
    return () => {
      if (window) window.removeEventListener('scroll', handleScroll)
    }
  })

  function handleScroll() {
    lastKnownScrollX = window.scrollX
    lastKnownScrollY = window.scrollY

    if (!ticking) {
      window.requestAnimationFrame(() => {
        setScrollX(lastKnownScrollX)
        setScrollY(lastKnownScrollY)
        ticking = false
      })
      ticking = true
    }
  }

  return { scrollX, scrollY }
}