# react-element-scroll-hook

> A react hook to use the scroll information of an element

Latest version **1.1.0** (published 2020-06-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-element-scroll-hook
pnpm add react-element-scroll-hook
yarn add react-element-scroll-hook
bun add react-element-scroll-hook
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-06-23 |
| First published | 2019-07-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 59 |
| Author | Tomás Tarragón |
| Maintainers | tomisu |
| Keywords | scroll, position, react, hook, scroll position, react hook, element scroll, scroll info |

## Links

- npm: https://www.npmjs.com/package/react-element-scroll-hook
- Repository: https://github.com/tomisu/react-element-scroll-hook
- Homepage: https://github.com/tomisu/react-element-scroll-hook#readme
- Issues: https://github.com/tomisu/react-element-scroll-hook/issues
- npm.io page: https://npm.io/package/react-element-scroll-hook

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2020-06-23
- 1.0.8 — 2019-09-19
- 1.0.7 — 2019-09-17
- 1.0.4 — 2019-07-23
- 1.0.3 — 2019-07-20
- 1.0.2 — 2019-07-19
- 1.0.1 — 2019-07-19
- 1.0.0 — 2019-07-19

## README

# react-element-scroll-hook

A react hook to use the scroll information of an element.

## Install

`npm install react-element-scroll-hook`

## Usage

```
// Import the hook
import useScrollInfo from 'react-element-scroll-hook';

function Mycomponent(props) {
  // Initialize the hook
  const [scrollInfo, setRef] = useScrollInfo();

  // Use the scrollInfo at will
  console.log(scrollInfo);

  // use setRef to indicate the element you want to monitor
  return (
    <div id="content" ref={setRef}>
      {props.children}
    </div>
  );
}
```

## scrollInfo object

When using this hook, you'll get an object containing the scroll data. It has two keys, `x` and `y`, each of them contain the following keys:

- value: amount of pixels scrolled
- total: amount of pixels that can be scrolled
- percentage: a value from 0 to 1 or `null` if there's no scroll
- className: a string to identify the state of the scroll
- direction: the direction of the last scroll: 1 for down/right, -1 for up/left, 0 for initial value

#### className

For the y axis, className can take 4 values:
`scroll-top`, `scroll-middle-y`, `scroll-bottom`, and `no-scroll-y`.

For the x axis, the values are:
`scroll-left`, `scroll-middle-x`, `scroll-right`, and `no-scroll-x`.

#### Example scrollInfo object

```
{
  x: {
    percentage: 0.5,
    value: 120,
    total: 240,
    className: 'scroll-middle-x',
    direction: 1
  },
  y: {
    percentage: 1,
    value: 200,
    total: 200,
    className: 'scroll-bottom',
    direction: -1
  }
}
```

## Basic Example

In this basic example, we'll add the scroll Y className to a component, to later style it with CSS based on weather it's scrolle or not.

```
// Import the hook
import useScrollInfo from 'react-element-scroll-hook';

function Mycomponent(props) {
  // Initialize the hook
  const [scrollInfo, setRef] = useScrollInfo();

  return (
    <div id="content" ref={setRef} className={scrollInfo.y.className}>
      {props.children}
    </div>
  );
}
```

## Accessing the element ref

If you also need to access the monitored element, you can use the third constant returned by `useScrollInfo`:

```
function Mycomponent(props) {
  // Initialize the hook
  const [scrollInfo, setRef, ref] = useScrollInfo();

  // Do something with the element
  console.log(ref.current);

  return (
    <div id="content" ref={setRef}>
      {props.children}
    </div>
  );
}
```

## Browser compatibility

This should work out of the box on all major browser, including Edge. However, it uses ResizeObserver to work completely flawless.
If you want it to work on older browsers properly when the element is resized (but the viewport isn't), you'll need a ResizeObserver polyfill.

---
_Source: https://npm.io/package/react-element-scroll-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._