///
/**
* @name Options
* @description The options to use for the ripple
* @param duration The duration of the ripple animation
* @param timingFunction The timing function of the ripple animation
* @param disabled Whether the ripple is disabled
* @param className The class name to apply to the ripple
* @param opacity The opacity of the ripple
* @param containerClassName The class name to apply to the ripple container
* @param ignoreNonLeftClick Whether to ignore non left clicks
* @param onSpawn A function that is called when the ripple is spawned
* @param cancelAutomatically Whether to cancel the ripple automatically
* @param ref > The ref to the ripple host element
* @returns The options to use for the ripple
* @author Pol Gubau Amores - https://polgubau.com
*/
export interface RippleOptions {
duration: number;
timingFunction: string;
disabled?: boolean;
className: string;
opacity: number;
containerClassName: string;
ignoreNonLeftClick: boolean;
onSpawn?: (ctx: {
/** the ripple element */
readonly ripple: HTMLDivElement;
/** cancels the current ripple animation */
readonly cancelRipple: () => void;
/** the ref to the ripple host element */
readonly ref: React.RefObject;
/** the event that triggered the ripple (ts: casting required) */
readonly event: unknown;
/** the ripple container element */
readonly container: HTMLDivElement;
}) => void;
cancelAutomatically: boolean;
ref: React.RefObject;
}
export interface MinimalEvent {
clientX: number;
clientY: number;
nativeEvent?: {
which?: number;
type?: string;
};
}
/**
* @name useRipple
* @description Creates a ripple hook with the specified options
* @param inputOptions The options to use for the ripple
* @returns A tuple containing the ref and the event handler
* @example
* const [ref, event] = useRipple();
* const [ref, event] = useRipple({color: 'blue'});
*
* @author Pol Gubau Amores - https://polgubau.com
*/
export default function useRipple(inputOptions?: Partial>): readonly [import('react').RefObject, (event: MinimalEvent) => void];
/**
* @name customRipple
* @description Creates a custom ripple hook with the specified options
* @param inputOptions The options to use for the ripple
* @returns A function that takes override options and returns a ripple hook
* @example
* const useCustomRipple = customRipple({color: 'red'});
* const [ref, event] = useCustomRipple({color: 'blue'});
* const [ref, event] = useCustomRipple();
* const [ref, event] = useCustomRipple({color: 'blue', duration: 1000});
* const [ref, event] = useCustomRipple({color: 'blue', duration: 1000, opacity: 0.5});
* const [ref, event] = useCustomRipple({color: 'blue', duration: 1000, opacity: 0.5, className: 'my-ripple'});
*
* @author Pol Gubau Amores - https://polgubau.com
*/
export declare function customRipple(inputOptions?: Partial, "ref">>): (overrideOptions?: Partial>) => readonly [import('react').RefObject, (event: MinimalEvent) => void];
//# sourceMappingURL=use-ripple.d.ts.map