use-scroll-to-bottom
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

use-scroll-to-bottom

React Hook which tells you when you've scrolled to bottom

Uses IntersectionObserver so make sure you can support it.

NPM

Install

npm install --save use-scroll-to-bottom

Usage

The hook returns a tuple of two things:

  1. A RefCallback which needs to go on the last element of your scrolling container.
  2. A boolean value which tells you whether bottom has been reached or not.

Check demo and examples

import React from 'react';
import {useScrollToBottom} from 'use-scroll-to-bottom'
 
export default function MyComponent() {
  // isBottom will be true when bottom is reached
  // add setBottomRef to the last element in your scrolling container
  const [setBottomRef, isBottom] = useScrollToBottom();
 
  return (
    <div className="simple-container">
      <div className="big-element">
        {isBottom && "Bottom reached"}
      </div>
      <div ref={setBottomRef}>Bottom</div>
    </div>
  )
}
 

License

MIT © tudorgergely

Dependencies (0)

    Dev Dependencies (23)

    Package Sidebar

    Install

    npm i use-scroll-to-bottom

    Weekly Downloads

    69

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    8.46 kB

    Total Files

    10

    Last publish

    Collaborators

    • tudorgergely