# @react-hooks-custom/use-scroll

> Get scrolling value quickly by React hook

Latest version **1.1.1** (published 2020-06-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @react-hooks-custom/use-scroll
pnpm add @react-hooks-custom/use-scroll
yarn add @react-hooks-custom/use-scroll
bun add @react-hooks-custom/use-scroll
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2020-06-27 |
| First published | 2020-06-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | BC Lau |
| Maintainers | littleee |
| Keywords | react, react hook, hook, react hooks, hooks, window scroll, window scroll hook, scroll position, viewport, viewport scroll, viewport scroll hook, usewindowscroll, use window scroll, react window scroll hook, react scroll position hook, usescrollposition, use scroll position, scroll position hook |

## Links

- npm: https://www.npmjs.com/package/@react-hooks-custom/use-scroll
- Repository: https://github.com/littleee/react-hooks-custom
- Homepage: https://github.com/littleee/react-hooks-custom#readme
- Issues: https://github.com/littleee/react-hooks-custom/issues
- npm.io page: https://npm.io/package/@react-hooks-custom/use-scroll

## 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.1 (latest) — 2020-06-27
- 1.1.0 — 2020-06-27
- 1.0.0 — 2020-06-26

## README

<hr>
<div align="center">
  <h1 align="center">
    useScroll()
  </h1>
</div>

<p align="center">
  <a href="https://bundlephobia.com/result?p=@react-hooks-custom/use-scroll">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@react-hooks-custom/use-scroll?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@react-hooks-custom/use-scroll">
    <img alt="Types" src="https://img.shields.io/npm/types/@react-hooks-custom/use-scroll?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@react-hooks-custom/use-scroll">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@react-hooks-custom/use-scroll?style=for-the-badge&labelColor=24292e">
  </a>
</p>

<pre align="center">npm i @react-hooks-custom/use-scroll</pre>
<hr>

A React hook for updating components when the scroll position of the window on the y-axis changes.

# Quick Start

```
import useScroll from '@react-hooks-custom/use-scroll'

const Component = (props) => {
  const { scrollX, scrollY } = useScroll();

  return <div>scroll pos: {scrollX}, {scrollY}</div>
}
```

# API

#### **useScroll () => ScrollType**

```
type ScrollType = {
  scrollX: number;
  scrollY: number;
}
```

#### **Returns { scrollX, scrollY }**

|| Type | Description
---|---|---
scrollX | number | The current scroll position of the window on the x-axis
scrollY | number | The current scroll position of the window on the y-axis

# LICENSE

MIT

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