@gfazioli/mantine-onboarding-tour/dist/types/hooks/use-onboarding-tour/use-onboarding-tour.d.ts

A Mantine component enables you to create a onboarding-tour effect using overlays, popovers, and onboarding tours, which enhances element visibility and interactivity.

import { OnboardingTourFocusRevealProps } from '../../OnboardingTourFocusReveal/OnboardingTourFocusReveal';
export type OnboardingTourStep = {
    /** Unique id of the tour. Will be use for the data-onboarding-tour-id attribute */
    id: string;
    /** Header of the tour. You can also pass a React component here */
    header?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);
    /** Title of the tour. You can also pass a React component here */
    title?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);
    /** Custom Content of the tour. You can also pass a React component here */
    content?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);
    /** Footer of the tour. You can also pass a React component here */
    footer?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);
    /** Props passed to FocusReveal */
    focusRevealProps?: OnboardingTourFocusRevealProps | ((tourController: OnboardingTourController) => OnboardingTourFocusRevealProps);
    /** Anything else */
    [key: string]: any;
};
/** Options for useOnboardingTour() hook */
export type OnboardingTourOptions = {
    /** Loop the tour */
    loop?: boolean;
    /** Triggered when the tour starts   */
    onOnboardingTourStart?: () => void;
    /** Triggered when the tour ends */
    onOnboardingTourEnd?: () => void;
    /** Triggered when the tour changes */
    onOnboardingTourChange?: (tourStep: OnboardingTourStep) => void;
};
export type OnboardingTourController = Readonly<{
    /** List of tour steps */
    tour: OnboardingTourStep[];
    /** Current step */
    currentStep: OnboardingTourStep | undefined;
    /** Current step index of the tour. Zero-based index */
    currentStepIndex: number | undefined;
    /** ID of the selected tour */
    selectedStepId: string | undefined;
    /** Set the current index */
    setCurrentStepIndex: (index: number) => void;
    /** Start the tour */
    startTour: () => void;
    /** End the tour */
    endTour: () => void;
    /** Go to the next tour */
    nextStep: () => void;
    /** Go to the previous tour */
    prevStep: () => void;
    /** Options of the tour */
    options: OnboardingTourOptions;
}>;
/**
 * This hook is used to manage onboarding tours
 * You can use this hook to start, go to the next or previous tour
 *
 * @param tour The list of tours
 * @param options The options of the tour
 * @returns
 */
export declare function useOnboardingTour(tour: OnboardingTourStep[], options?: OnboardingTourOptions): {
    readonly tour: OnboardingTourStep[];
    readonly currentStep: OnboardingTourStep;
    readonly currentStepIndex: number;
    readonly selectedStepId: string;
    readonly setCurrentStepIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
    readonly startTour: () => void;
    readonly endTour: () => void;
    readonly nextStep: () => void;
    readonly prevStep: () => void;
    readonly options: {
        loop: boolean;
        /** Triggered when the tour starts   */
        onOnboardingTourStart?: () => void;
        /** Triggered when the tour ends */
        onOnboardingTourEnd?: () => void;
        /** Triggered when the tour changes */
        onOnboardingTourChange?: (tourStep: OnboardingTourStep) => void;
    };
};