@gfazioli/mantine-text-animate
Version:
The TextAnimate component allows you to animate text with various effects.
89 lines (88 loc) • 2.23 kB
TypeScript
/**
* Available easing functions for the animation
*/
export type NumberTickerEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
/**
* Base props shared between NumberTicker component and useNumberTicker hook
*/
export interface NumberTickerBaseProps {
/**
* The target value to animate to
*/
value: number;
/**
* The initial value to start from
* @default 0
*/
startValue?: number;
/**
* Delay before starting the animation in seconds
* @default 0
*/
delay?: number;
/**
* Number of decimal places to display
* @default 0
*/
decimalPlaces?: number;
/**
* Animation speed multiplier (higher = faster)
* @default 1
*/
speed?: number;
/**
* Easing function for the animation
* @default "ease-out"
*/
easing?: NumberTickerEasing;
/**
* Whether the animation should be active
* @default true
*/
animate?: boolean;
/**
* Callback function called when animation completes
*/
onCompleted?: () => void;
}
/**
* Hook props interface extending the base props
*/
export interface UseNumberTickerProps extends NumberTickerBaseProps {
}
/**
* Return value interface for the useNumberTicker hook
*/
export interface UseNumberTickerResult {
/**
* The formatted text representation of the current value
*/
text: string;
/**
* The current numeric value (not formatted)
*/
displayValue: number;
/**
* Function to start the animation
*/
start: () => void;
/**
* Function to stop the animation while keeping the current value
*/
stop: () => void;
/**
* Function to reset the animation to the initial value
*/
reset: () => void;
/**
* Whether the animation is currently running
*/
isAnimating: boolean;
}
/**
* Hook that provides number ticker animation functionality
*
* This hook powers the NumberTicker component and can be used independently
* for more advanced use cases.
*/
export declare function useNumberTicker({ value, startValue, delay, decimalPlaces, speed, easing, animate, onCompleted, }: UseNumberTickerProps): UseNumberTickerResult;