Event Listener
kkcy opened this issue · 2 comments
Hey there, thanks for the cool library!
Just a quick question, is there anyway we can have a listener on scroll?
My use case is just to update state to the current index.
So, in v1 there's no mechanism to achieve that however i've been working on that functionality for v2 and i plan to introduce two new hooks useScrollState
and useScrollValue
.
It sounds like useScrollState
will do what you're asking: https://codesandbox.io/s/scrollex-usescrollstate-62xbv3?file=/src/App.tsx
Here's a breakdown of how useScrollState will work:
const SomeComponent = () => {
const isSectionActive = useScrollState(({ section, position }) => {
return position >= section.topAt('container-bottom') && position <= section.bottomAt('container-top')
});
return <div>Section Active: {String(isSectionActive)}</div>
}
In the above example, the function passed to useScrollState
will automatically be re-evaluated any time that either the scroll position changes or the bounding rect of the section changes.
Whenever the return value of this function changes (in this case a boolean), then the component will rerender with the new return value.
I'm hoping to have v2 published within a month, maybe even sooner.
Hope that helps!
Yeah I think that fits!
Looking forward for the update, thanks Malerba!