use-scroll-to-bottom - GitLite

KO | EN

gitlite — search

#hacktoberfest #react #golang #go #android #rust #docker #nodejs #macos #java #windows #awesome-list #openai #open-source

use-scroll-to-bottom

(★ 108)

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

File Explorer

Download Latest Version (.zip)

- - coverage.yml
  - main.yml
- - favicon.ico
  - index.html
  - manifest.json
  - tacit-css.min.css
- - App.js
  - App.test.js
  - index.js
- package-lock.json
- package.json
- README.md
- .eslintrc
- index.test.tsx
- index.tsx
- typings.d.ts
- utils.js
.editorconfig
.eslintignore
.eslintrc
.gitignore
.prettier.json
.travis.yml
LICENSE
package-lock.json
package.json
README.md
tsconfig.json
tsconfig.test.json

# Installation Guide

1. Get the code

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

Downloads the entire project code from GitHub to your computer.

cd use-scroll-to-bottom

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

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

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# use-scroll-to-bottom

> React Hook which tells you when you&#x27;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 (
    <div className="simple-container">
      <div className="big-element">
        {isBottom && "Bottom reached"}
      </div>
      <div ref={setBottomRef}>Bottom</div>
    </div>
  )
}

```

## License

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