JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 9
  • Score
    100M100P100Q40756F
  • License MIT

A scroll sensor to solve your react scroll into viewport issues.

Package Exports

  • react-scrollsense
  • react-scrollsense/io

Readme

React Scroll Sensor

Docs are still under development

Wanna create animated sites when they get scrolled up, read on,

TLDR; An unopiniated sensor to detect when your component gets into the viewport and inject the intersection info into your component.

If you ever have tried to implement the support necessory to detect when your components gets into the viewport when scrolling, you know how much it hurts. That's the exact reason this library is here. Whether you want to use scroll event based tracking or intersection observer based tracking, it's already packed into this sensor.

Installing

  yarn add react-scrollsense

or

  npm save react-scrollsense

Get Started

React scroll sensor comes with two implementations. Default implementation is scroll event based version. The other implementation is based on Intersection Provider api. On a next section we will consider how to select the preferred implementation for a given situation.

Also, this library use a common architectural pattern to expose the components, so that any future extension or switching between implementations becomes easier.

app.js

// for scroll event based implementation, 
import ScrollSensor from 'react-scrollsense';
// Or, for intersection observer implementation use,
// import ScrollSensor from 'react-scrollsense/io';

function App() {

     return (
          <ScrollSensor>
               <!-- Other componets --> 
               <MyAwesomeComponent/>
          </ScrollSensor>
     )
}

export default App;

ScrollSensor is the provider of scroll implementation and carries the sensor. You can nest it after the router if any, to reinitialize the sensor for each page. We use the popular provider syntax (as with redux) to inject the sensor.

MyAwesomeComponent.js

// for scroll event based implementation, 
import {useScrollSense}  from 'react-scrollsense';
// Or, for intersection observer implementation use,
// import {useScrollSense}  from 'react-scrollsense/io';
import {useEffect, useRef} from 'react';

function MyAwesomeComponent() {
     
     const sensor = useScrollSense();
     const ref = useRef();
     const [cls, setCls] = useState('my-component');

     useEffect(() => {

          let tracker = sensor.onIntersection(ref.current, (entry, el) => {

               if(entry.isIntersecting) {
                    // Now its on screen let's change class
                    setCls('my-component scrolled');
               }
               else {
                    // It's off screen
                    setCls('my-component');
               }

          });

          return () => { sensor.detach(tracker)}

     }, []);

     return (
          <div className={cls} ref={ref}>
               Hello, Scroll Me!
          </div>
     )

}

export default MyAwesomeComponent;

Then on the component on which you need to add the scroll detection, use the hook, useScrollSense() to get the sensor. And call onIntersection() inside the useEffect to make sure that the component is rendered and the reference is valid.

Note that I used an empty array as the second argument to the useEffect, so that I'm not calling it endlessly. Although its safe to re-invoke the onIntersection, better call it only a once in your component lifecycle.

Also, you can return a function in useEffect to signal react that when a component is unmounted call the given function. You can detach the sensor from the unmounted component by returning a function as above.

Documentation (In progress)

  1. Basic Guide
  2. Intersection Observer vs Scroll Events, which?
  3. Advanced Guide
  4. API
  5. Raf and throttling in React Scroll Sense
  6. Demos
  7. Performance Comparison

See React Scroll Sense on GitHub

License

Copyright (c) 2022 XPD::Kasun Jayawardena.

Licensed under The MIT License (MIT).

  • Find it useful? give it a star :)
  • Problems? Add your problem in Issues, I will try to accomadate as much as I am allowed to.