Skip to content

tudorgergely/use-scroll-to-bottom

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

Bumps [ajv](https://github.com/ajv-validator/ajv) from 6.12.0 to 6.12.6.
- [Release notes](https://github.com/ajv-validator/ajv/releases)
- [Commits](ajv-validator/ajv@v6.12.0...v6.12.6)

---
updated-dependencies:
- dependency-name: ajv
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
4301f23

Git stats

Files

Permalink
Failed to load latest commit information.

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