@gfazioli/mantine-onboarding-tour
Version:
A Mantine component enables you to create a onboarding-tour effect using overlays, popovers, and onboarding tours, which enhances element visibility and interactivity.
1 lines • 10.5 kB
Source Map (JSON)
{"version":3,"file":"use-onboarding-tour.cjs","sources":["../../../../src/hooks/use-onboarding-tour/use-onboarding-tour.ts"],"sourcesContent":["import { useState } from 'react';\nimport { OnboardingTourFocusRevealProps } from '../../OnboardingTourFocusReveal/OnboardingTourFocusReveal';\n\nexport type OnboardingTourStep = {\n /** Unique id of the tour. Will be use for the data-onboarding-tour-id attribute */\n id: string;\n\n /** Header of the tour. You can also pass a React component here */\n header?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);\n\n /** Title of the tour. You can also pass a React component here */\n title?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);\n\n /** Custom Content of the tour. You can also pass a React component here */\n content?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);\n\n /** Footer of the tour. You can also pass a React component here */\n footer?: React.ReactNode | ((tourController: OnboardingTourController) => React.ReactNode);\n\n /** Props passed to FocusReveal */\n focusRevealProps?:\n | OnboardingTourFocusRevealProps\n | ((tourController: OnboardingTourController) => OnboardingTourFocusRevealProps);\n\n /** Anything else */\n [key: string]: any;\n};\n\n/** Options for useOnboardingTour() hook */\nexport type OnboardingTourOptions = {\n /** Loop the tour */\n loop?: boolean;\n\n /** Triggered when the tour starts */\n onOnboardingTourStart?: () => void;\n\n /** Triggered when the tour ends */\n onOnboardingTourEnd?: () => void;\n\n /** Triggered when the tour changes */\n onOnboardingTourChange?: (tourStep: OnboardingTourStep) => void;\n};\n\nexport type OnboardingTourController = Readonly<{\n /** List of tour steps */\n tour: OnboardingTourStep[];\n\n /** Current step */\n currentStep: OnboardingTourStep | undefined;\n\n /** Current step index of the tour. Zero-based index */\n currentStepIndex: number | undefined;\n\n /** ID of the selected tour */\n selectedStepId: string | undefined;\n\n /** Set the current index */\n setCurrentStepIndex: (index: number) => void;\n\n /** Start the tour */\n startTour: () => void;\n\n /** End the tour */\n endTour: () => void;\n\n /** Go to the next tour */\n nextStep: () => void;\n\n /** Go to the previous tour */\n prevStep: () => void;\n\n /** Options of the tour */\n options: OnboardingTourOptions;\n}>;\n\n/**\n * This hook is used to manage onboarding tours\n * You can use this hook to start, go to the next or previous tour\n *\n * @param tour The list of tours\n * @param options The options of the tour\n * @returns\n */\nexport function useOnboardingTour(tour: OnboardingTourStep[], options?: OnboardingTourOptions) {\n const defaultOptions = {\n loop: false,\n };\n\n const mergedOptions = { ...defaultOptions, ...options };\n\n const [currentStepIndex, setCurrentStepIndex] = useState<number>();\n\n const { loop, onOnboardingTourStart, onOnboardingTourEnd, onOnboardingTourChange } =\n mergedOptions || {};\n\n /** Start the tour */\n const startTour = () => {\n setCurrentStepIndex(0);\n onOnboardingTourStart?.();\n onOnboardingTourChange?.(tour[0]);\n };\n\n /** Go to the next tour */\n const nextStep = () => {\n if (currentStepIndex < tour.length - 1) {\n setCurrentStepIndex((currentStep) => currentStep + 1);\n onOnboardingTourChange?.(tour[currentStepIndex + 1]);\n } else if (loop) {\n setCurrentStepIndex(0);\n } else {\n setCurrentStepIndex(undefined);\n onOnboardingTourEnd?.();\n }\n };\n\n /** Go to the previous tour */\n const prevStep = () => {\n if (currentStepIndex > 0) {\n setCurrentStepIndex((currentStep) => currentStep - 1);\n onOnboardingTourChange?.(tour[currentStepIndex - 1]);\n } else if (loop) {\n setCurrentStepIndex(tour.length - 1);\n } else {\n setCurrentStepIndex(undefined);\n onOnboardingTourEnd?.();\n }\n };\n\n /** End the tour */\n const endTour = () => {\n setCurrentStepIndex(undefined);\n onOnboardingTourEnd?.();\n };\n\n return {\n tour,\n currentStep: tour[currentStepIndex],\n currentStepIndex,\n selectedStepId: tour[currentStepIndex]?.id,\n setCurrentStepIndex,\n startTour,\n endTour,\n nextStep,\n prevStep,\n options: mergedOptions,\n } as const;\n}\n"],"names":["useState"],"mappings":"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"}