rooks/dist/esm/hooks/useEasing.d.ts

Collection of awesome react hooks

/**
 * Easing function type - takes progress (0-1) and returns eased value (0-1)
 */
type EasingFunction = (t: number) => number;
/**
 * Common easing functions
 */
declare const Easing: {
    linear: (t: number) => number;
    easeInQuad: (t: number) => number;
    easeOutQuad: (t: number) => number;
    easeInOutQuad: (t: number) => number;
    easeInCubic: (t: number) => number;
    easeOutCubic: (t: number) => number;
    easeInOutCubic: (t: number) => number;
};
/**
 * Easing state - whether the animation is running or idle
 */
type EasingState = "idle" | "running";
/**
 * Easing direction - whether animating forward (0→1) or backward (1→0)
 */
type EasingDirection = "forward" | "backward";
/**
 * Options for useEasing hook
 */
interface UseEasingOptions {
    /** Easing function to use. Default: Easing.linear */
    easing?: EasingFunction;
    /** Whether to start animation on mount. Default: true */
    autoStart?: boolean;
    /** Whether to loop the animation. Default: false */
    loop?: boolean;
    /** Whether to alternate direction on each loop (ping-pong). Default: false */
    alternate?: boolean;
    /** Delay before starting animation in ms. Default: 0 */
    delay?: number;
    /** Callback fired each time animation reaches the end */
    onEnd?: () => void;
}
/**
 * Controls returned by useEasing hook
 */
interface EasingControls {
    /** Start or resume the animation */
    start: () => void;
    /** Stop/pause the animation at current position */
    stop: () => void;
    /** Reset to initial state (progress=0, direction=forward, endCount=0) */
    reset: () => void;
    /** Reset and start (convenience method) */
    restart: () => void;
    /** Current state: "idle" or "running" */
    state: EasingState;
    /** Current direction: "forward" or "backward" */
    direction: EasingDirection;
    /** Number of times animation has reached the end */
    endCount: number;
}
/**
 * useEasing hook
 *
 * A hook for creating controlled easing animations with start/stop/reset capabilities.
 *
 * @param duration - Duration of the animation in milliseconds
 * @param options - Configuration options
 * @returns Tuple of [progress, controls] where progress is 0-1 and controls provide animation control
 * @see https://rooks.vercel.app/docs/hooks/useEasing
 *
 * @example
 * ```tsx
 * const [progress, { start, stop, state }] = useEasing(1000, {
 *   easing: Easing.easeInOutQuad,
 *   autoStart: false,
 * });
 * ```
 */
declare function useEasing(duration: number, options?: UseEasingOptions): [number, EasingControls];
export { useEasing, Easing };
export type { EasingFunction, EasingState, EasingDirection, UseEasingOptions, EasingControls, };