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)
- Basic Guide
- Intersection Observer vs Scroll Events, which?
- Advanced Guide
- API
- Raf and throttling in React Scroll Sense
- Demos
- 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.