https://github.com/tudorgergely/use-scroll-to-bottom

React Hook which tells you when you've scrolled to bottom
https://github.com/tudorgergely/use-scroll-to-bottom

bottom intersection-observer react react-hooks typescript

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/tudorgergely/use-scroll-to-bottom
• Owner: tudorgergely
• License: mit
• Created: 2020-03-28T21:57:55.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-04-18T17:53:32.000Z (over 1 year ago)
• Last Synced: 2024-09-20T07:47:29.386Z (3 months ago)
• Topics: bottom, intersection-observer, react, react-hooks, typescript
• Language: JavaScript
• Homepage: https://tudorgergely.github.io/use-scroll-to-bottom/
• Size: 2.51 MB
• Stars: 109
• Watchers: 3
• Forks: 4
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• fucking-awesome-react-hooks - `use-scroll-to-bottom`
• awesome-react-hooks-cn - `use-scroll-to-bottom`
• awesome-react-hooks - `use-scroll-to-bottom`
• awesome-react-hooks - `use-scroll-to-bottom`

README

        
# use-scroll-to-bottom

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

Uses [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) so make sure you can support it.

[![NPM](https://badgen.net/npm/v/use-scroll-to-bottom)](https://www.npmjs.com/package/use-scroll-to-bottom) [![checks](https://badgen.net/github/checks/tudorgergely/use-scroll-to-bottom)](https://github.com/tudorgergely/use-scroll-to-bottom/actions?workflow=CI) [![size](https://badgen.net/bundlephobia/minzip/use-scroll-to-bottom)](https://bundlephobia.com/result?p=use-scroll-to-bottom) [![coverage](https://coveralls.io/repos/github/tudorgergely/use-scroll-to-bottom/badge.svg?branch=master)](https://coveralls.io/github/tudorgergely/use-scroll-to-bottom?branch=master)

## Install

```bash

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](https://tudorgergely.github.io/use-scroll-to-bottom/) and [examples](https://github.com/tudorgergely/use-scroll-to-bottom/tree/master/example)

```tsx

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 (

    


      


        {isBottom && "Bottom reached"}

      

      
Bottom

    

  )

}


```

## License

MIT © [tudorgergely](https://github.com/tudorgergely)