@n8tb1t/use-scroll-position

use-scroll-position

use-scroll-position is a React hook that returns the browser viewport X and Y scroll position. It is highly optimized and using the special technics to avoid unnecessary rerenders!

It uses the default react hooks rendering lifecycle, which allows you to fully control its behavior and prevent unnecessary renders.

Demo

• Hide navbar on scroll
• Hide/Show sidebar on scroll
• Display viewport scroll position

Install

yarn add @n8tb1t/use-scroll-position

Usage

useScrollPosition(effect,deps)

Arguments	Description
effect	Effect callback.
deps	For effects to fire on selected dependencies change.

The useScrollPosition returns prevPos and currPos.

Examples

import { useScrollPosition } from '@n8tb1t/use-scroll-position'
  
useScrollPosition(({ prevPos, currPos }) => {
  console.log(currPos.x)
  console.log(currPos.y)
})

import React, { useState } from 'react'
import { useScrollPosition } from '@n8tb1t/use-scroll-position'

const [hideOnScroll, setHideOnScroll] = useState(true)
  
useScrollPosition(({ prevPos, currPos }) => {
  const isShow = currPos.y > prevPos.y
  if (isShow !== hideOnScroll) setHideOnScroll(isShow)
}, [hideOnScroll])

Why to use

use-scroll-position returns the scroll position of the browser window, using a modern, stable and performant implementation.

Most of the time scroll listeners do very expensive work, such as querying dom elements, reading height / width and so on. use-scroll-position solves this by using requestAnimationFrame technic to avoid too many reflows (the browser to recalculate everything)

Changelog

1.0.31 (2019-06-25)

Documentation Changes

• Add codesandbox examples #1 (a7a8ec73)