Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

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 checks size coverage

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

You can’t perform that action at this time.