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

Readme

Keywords

none

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