react-scroll-info(useScrollInfo)

A custom hook for creating to access the scroll info while user scrolling on page in react components.

Features

• You control the UI - useScrollInfo provides the necessary info like isPageTop, isPageBottom, isScrolledUp, isScrolledDown, scrolledPosition, documentHeight

• Written in Vanilla Javascript

• Cross-browser compatibility

Demo

CodeSandbox Demo

Installation

$ npm install react-scroll-info
# or
$ yarn add react-scroll-info

Usage

import React, { useEffect } from 'react'
import useScrollInfo from 'react-scroll-info'
function Demo() {
 const {
    isPageBottom,
    isPageTop,
    isScrolledDown,
    isScrolledUp,
    scrolledPosition,
    documentHeight
  } = useScrollInfo();

  useEffect(() => {
    if (isPageBottom) {
      console.log("page reached to bottom");
    }
  }, [isPageBottom]);

  return (
    <div>
    <button>
        {isScrolledDown ? 'Up' : 'Down'}
    </button>
    {
        `isPageBottom: ${isPageBottom}
        isPageTop: ${isPageTop}
        isScrolledDown: ${isScrolledDown}
        isScrolledUp: ${isScrolledUp}
        scrolledPosition: ${scrolledPosition}
        documentHeight: ${documentHeight}`
    }
    </div>
  )
}

Detect Page Bottom Before Some Pixels

import React, { useEffect } from 'react'
import useScrollInfo from 'react-scroll-info'
function Demo() {
 const {
    isPageBottom,
    isPageTop,
    isScrolledDown,
    isScrolledUp,
    scrolledPosition,
    documentHeight
  } = useScrollInfo(50); // isPageBottom return true before 50 pixels of page bootm.

  useEffect(() => {
    if (isPageBottom) {
      console.log("page reached to bottom");
    }
  }, [isPageBottom]);

  return (
    <div>
    <button>
        {isScrolledDown ? 'Up' : 'Down'}
    </button>
    </div>
  )
}

useScrollInfo Config

The following are optional properties passed into useScrollInfo():

Param	Type	Default	Description
param1	number	0	If you want detect pagebottom before some pixels, pass param1 by default it 0.

What you get

Name	Description
isPageBottom	Reached bottom of the page it returns true - Boolean
isPageTop	Reached top of the page it returns true - Boolean
isScrolledUp	Scrolling Up it returns true - Boolean
isScrolledDown	Scrolling Down it returns true - Boolean
scrolledPosition	Current scrolled position - Number
documentHeight	Document(page) Height - Number