p0o / react-is-scrolling

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

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

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:

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

react-is-scrolling's Issues

No reactive update

If I scroll up and down fast in a fluid motion, it still just says "UP" or "DOWN" and doesn't update until I stop moving. This only detects the initial direction of a series of scroll gestures.

isScollingDown or Up is only called once

befor it is called a second time you have to do the other

dependencies should be as peer

The react + react-dom will always be used on projects of developers. Requiring them as dependencies may result in unnecessary bundle file size increase in order to include them. Suggest to be peerDependencies instead.

package.json

    "url": "https://github.com/p0o/react-is-scrolling/issues"
  },
  "homepage": "https://github.com/p0o/react-is-scrolling",
- "dependencies": {
+ "peerDependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
},

Not support for SSR

My React apps run with Server Side Rendering,,,when use it,,it's make can't access window