@scoir/scroll-trigger

@scoir/tabs

It helps in an app to centralize the trigger for an event listener for scrolling up or down

When you have separate events that track in different subcomponents, it's hard to synchronize actions that are supposed to occur with scroll events.

When using multiple scrollTriggers in subcomponents, sometimes the component with the scrollTrigger rerenders, and animations take a while to finish, so you end up with broken looking UI.

Centralizing the tracking of scroll position allows separation of the scrollTrigger from the usage of it, allowing those rerenders to not have to set up new events for tracking the same thing already tracked elsewhere.

Usage

const tabs = import {
    ScrollTrigerContextProvider,
    useScrollTrigger,
    useScrollingUpTrigger,
    useScrollingDownTrigger,
} from "@scoir/scroll-trigger"

// context provider at top level of the app
<ScrollTriggerContextProvider>
...
    // you only need to use one of the following hook calls for your purpose

    // This is a central use of useScrollTrigger from @material-ui/core/useScrollTrigger
    const trigger = useScrollTrigger()

    // This will be true when scrolling up, and false when scrolling down
    const trigger = useScrollingUpTrigger()

    // This will be true when scrolling down, and false when scrolling down
    const trigger = useScrollingDownTrigger()
...
</ScrollTriggerContextProvider>