❀Nomadic People Migration

    @swyg/corre
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4Β β€’Β PublicΒ β€’Β Published

    πŸƒβ€β™‚οΈ Corre



    πŸƒβ€β™‚οΈ Declaratively control how and when your code is executed. Hooks for setTimeout, setInterval, rAF and more!



    Installation

    npm install @swyg/corre
    
    yarn install @swyg/corre
    

    Usage

    useTimeout(...)

    Calls window.setTimeout(...) declaratively.

    const timeoutRef = useTimeout(
        callback: EffectCallback,
        delay: number | null,
        deps: React.DependencyList = [],
    ): MutableRefObject<number | null>;

    If delay === null, the timer won't be set; if it's already set, it will be cleared.

    If deps are passed, anytime any of them change, the previous timer will be cleared and a new one will be set. This means that:

    • If no deps are passed (and this never changes), the callback will be called only once.
    • If deps change faster than delay, the callback will never be called.

    Note callback is stored in a ref, so you don't need to pass its dependencies as deps if you don't want the behavior just described.


    useInterval(...)

    Calls window.setInterval(...) declaratively.

    const intervalRef = useInterval(
        callback: EffectCallback,
        delay: number | null,
        deps: React.DependencyList = [],
    ): MutableRefObject<number | null>

    If delay === null, the timer won't be set; if it's already set, it will be cleared.

    If deps are passed, anytime any of them change, the previous timer will be cleared and a new one will be set. This means that:

    • If deps change faster than delay, the callback will never be called.

    Note callback is stored in a ref, so you don't need to pass its dependencies as deps if you don't want the behavior just described.


    useRequestAnimationFrame(...) aliased useRAF(...)

    Calls window.requestAnimationFrame(...) declaratively.

    const rafRef = useRequestAnimationFrame(
        callback: EffectCallback,
        isRunning: boolean,
    ): MutableRefObject<number | null>;

    If isRunning === null, requestAnimationFrame won't be called; if it's already been called, it will be cancelled.


    useThrottledRequestAnimationFrame(...) aliased useThrottledRAF(...)

    Calls window.requestAnimationFrame(...) wrapped in window.setInterval(...) declaratively.

    This means this callback will be called through window.requestAnimationFrame(...) once every delay ms.

    const [intervalRef, rafRef] = useThrottledRequestAnimationFrame(
        callback: EffectCallback,
        delay: number | null,
        isRunning: boolean = true,
    ): [
        MutableRefObject<number | null>,
        MutableRefObject<number | null>,
    ];

    If delay === null or isRunning === null, the timer won't be set and requestAnimationFrame won't be called; if it's already set / it has already been called, it will be cleared, they'll be cleared / cancelled.

    If deps are passed, anytime any of them change, the previous timer will be cleared and a new one will be set. This means that:

    • If deps change faster than delay, the callback will never be called.

    useThrottledCallback(...)

    Returns a throttled version of callback that, when called:

    • Calls the original callback if it's been more than delay ms since the last call.
    • Uses setTimeout to call the original callback once delay ms have passed since the last call.
    const throttledFn = useThrottledCallback<A extends any[]>(
        callback: (...args: A) => void,
        delay: number,
        deps: DependencyList = [],
        options: { makeResponsive: boolean } = {}
    ): (...args: A) => void;

    If deps are passed, anytime any of them change, the previous timer will be cleared. This means that:

    • Any pending invocation of callback won't happen (unless the throttled function is called again).
    • If deps change faster than delay, the callback will never be called.

    Note callback is stored in a ref, so you don't need to pass its dependencies as deps if you don't want the behavior just described.


    Attribution / Inspiration

    Install

    npm i @swyg/corre

    DownloadsWeekly Downloads

    34

    Version

    1.0.4

    License

    Apache-2.0

    Unpacked Size

    70.7 kB

    Total Files

    39

    Last publish

    Collaborators

    • vincentropy
    • danziger
    • leafty