@gfazioli/mantine-onboarding-tour
Version:
A Mantine 9 onboarding tour component with focus-reveal overlays, cutout highlights, step-by-step popover navigation, and compound components for guided user experiences.
30 lines (29 loc) • 1.38 kB
TypeScript
interface ScrollIntoViewAnimation {
/** Target element alignment relatively to parent based on current axis */
alignment?: 'start' | 'end' | 'center';
}
interface ScrollIntoViewParams {
/** Callback fired after scroll */
onScrollFinish?: () => void;
/** Duration of scroll in milliseconds */
duration?: number;
/** Axis of scroll */
axis?: 'x' | 'y';
/** Custom mathematical easing function */
easing?: (t: number) => number;
/** Additional distance between nearest edge and element */
offset?: number;
/** Indicator if animation may be interrupted by user scrolling */
cancelable?: boolean;
/** Prevents content jumping in scrolling lists with multiple targets */
isList?: boolean;
scrollableRef?: React.RefObject<HTMLElement | null>;
}
interface ScrollIntoViewReturnType<Target extends HTMLElement = any, Parent extends HTMLElement | null = null> {
scrollableRef: React.RefObject<Parent>;
targetRef: React.RefObject<Target>;
scrollIntoView: (params?: ScrollIntoViewAnimation) => void;
cancel: () => void;
}
export declare function useScrollIntoView<Target extends HTMLElement = any, Parent extends HTMLElement | null = null>({ duration, axis, onScrollFinish, easing, offset, cancelable, isList, scrollableRef, }?: ScrollIntoViewParams): ScrollIntoViewReturnType<Target, Parent>;
export {};