import * as React from "react";
import { useScrollData } from "scroll-data-hook";
const MyComponent = () => {
const {
scrolling,
time,
speed,
direction,
position,
relativeDistance,
totalDistance
} = useScrollData({
onScrollStart: () => {
console.log('Started scrolling);
},
onScrollEnd: () => {
console.log('Finished scrolling);
}
});
return (
<div>
<p>
{scrolling ? 'Scrolling' : 'Not scrolling'}
</p>
<p>
Scrolling time: {time} milliseconds
</p>
<p>
Horizontal speed: {speed.x} pixels per second
</p>
<p>
Vertical speed: {speed.y} pixels per second
</p>
<p>
Direction: {direction.x} {direction.y}
</p>
<p>
Relative distance: {relativeDistance.x}/{relativeDistance.y}
</p>
<p>
Total distance: {totalDistance.x}/{totalDistance.y}
</p>
</div>
)
};