@anton.bobrov/react-vevet-hooks/lib/types/hooks/useAnimationFrameSync.d.ts

A collection of custom React hooks designed to seamlessly integrate with the `Vevet` library

export declare type TUseAnimationFrameSyncData = Record<string, number>;
export interface IUseAnimationFrameSyncProps<T extends TUseAnimationFrameSyncData> {
    /** The initial data for the animation frame, with properties to animate. */
    data: T;
    /** Callback function to be called on each update with the current interpolated values. */
    onUpdate: (data: T) => void;
    /** Callback function to be called on each update with the target values. */
    onSet?: (data: T) => void;
    /** The easing factor for the interpolation. Defaults to 0.1. */
    ease?: number;
}
/**
 * Custom React hook that synchronizes animation frame data using linear interpolation.
 *
 * This hook allows you to smoothly animate properties by specifying their initial values.
 * It uses linear interpolation to transition between current and target values.
 * The animation frame will automatically stop once all values reach their targets.
 *
 * @example
 * const { set } = useAnimationFrameSync({
 *   data: { x: 0, y: 0 },
 *   onUpdate: ({ x, y }) => console.log(x, y),
 * });
 *
 * set('x', 1);
 * set('y', 0.5);
 * set('y', 0.5, true); // instant change
 */
export declare function useAnimationFrameSync<T extends TUseAnimationFrameSyncData>({ data: initialData, onUpdate: onUpdateProp, onSet: onSetProp, ease: easeProp, }: IUseAnimationFrameSyncProps<T>): {
    set: (prop: keyof T, value: number, isInstant?: boolean) => void;
    getMoment: () => T;
};
//# sourceMappingURL=useAnimationFrameSync.d.ts.map