/// /** * @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