# react-is-scrolling

> Simply detect if users are scrolling in your components in a declarative API

Latest version **1.0.1** (published 2017-02-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-is-scrolling
pnpm add react-is-scrolling
yarn add react-is-scrolling
bun add react-is-scrolling
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2017-02-05 |
| First published | 2017-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Pooria Atarzadeh |
| Maintainers | p0o |
| Keywords | react, scroll, scrolling, component, window, javascript |

## Links

- npm: https://www.npmjs.com/package/react-is-scrolling
- Repository: https://github.com/p0o/react-is-scrolling
- Issues: https://github.com/p0o/react-is-scrolling/issues
- npm.io page: https://npm.io/package/react-is-scrolling

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^15.4.2
- [react-dom](https://npm.io/package/react-dom.md) ^15.4.2

## 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.0.1 (latest) — 2017-02-05
- 1.0.0 — 2017-02-05

## README

## Getting started
This package is providing you a Higher Order Component with a declarative API so you can detect if your users are scrolling in the browser or not. Apart from that you can also detect the direction of their scrolling like below.

`npm i react-is-scrolling --save`

```javascript
import React, { Component } from 'react';
import IsScrolling from 'react-is-scrolling';

@IsScrolling
export default class YourComponent extends Component {
  render() {
    const { isScrolling, isScrollingDown, isScrollingUp } = this.props;
    
    return (
      <div>
        { isScrolling &&
          <p>You are scrolling</p>
        }
        
        { isScrollingDown &&
          <p>You are scrolling down</p>
        }
        
        { isScrollingUp &&
          <p>You are scrolling up</p>
        }
      </div>
    );
  }
}
```

Notice that this package is not using an imperative event based system like other packages so it is much more aligned with React's declarative nature. Also it abstracts away all the heavy lifting of debouncing browser's `scroll` event and is intended to support different browsers.

If you are not using ES7 decorator functions like `@IsScrolling` or you want to have this package on a stateless/function component, you can simply use it this way:


```javascript
import React, { Component } from 'react';
import IsScrolling from 'react-is-scrolling';

function YourComponent({isScrolling, isScrollingDown, isScrollingUp}) {
  return (
    <div>
      { isScrolling &&
        <p>You are scrolling</p>
      }

      { isScrollingDown &&
        <p>You are scrolling down</p>
      }

      { isScrollingUp &&
        <p>You are scrolling up</p>
      }
    </div>
  );
}

export default IsScrolling(YourComponent);
```

## Demo

You can check out how it works [here](https://p0o.github.io/react-is-scrolling/)

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