UNPKG

@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.

30 lines (29 loc) 1.58 kB
import React from 'react'; import { ElementProps, Factory, OverlayProps, PopoverProps, TransitionOverride } from '@mantine/core'; import { OnboardingTourFocusRevealFocusedMode } from '../OnboardingTourFocusReveal/focus-reveal-modes'; export interface OnboardingTourFocusRevealGroupProps { /** OnboardingTourFocusReveal mode/effects when focused */ focusedMode?: OnboardingTourFocusRevealFocusedMode; /** Indicator if element should be revealed. Default `false` */ withReveal?: boolean; /** Will render overlay if set to `true` */ withOverlay?: boolean; /** Props passed down to `Overlay` component */ overlayProps?: OverlayProps & ElementProps<'div'>; /** Props passed down to the `Transition` component that used to animate the Overlay, use to configure duration and animation type, `{ duration: 150, transition: 'fade' }` by default */ transitionProps?: TransitionOverride; /** Props passed down to the `Popover` component */ popoverProps?: Omit<PopoverProps, 'withinPortal'>; /** Content */ children?: React.ReactNode; } export type OnboardingTourFocusRevealGroupStylesNames = 'onboarding-tour-focus-reveal-group'; export type OnboardingTourFocusRevealGroupFactory = Factory<{ props: OnboardingTourFocusRevealGroupProps; ref: HTMLDivElement; stylesNames: OnboardingTourFocusRevealGroupStylesNames; }>; export declare function OnboardingTourFocusRevealGroup(_props: OnboardingTourFocusRevealGroupProps): React.JSX.Element; export declare namespace OnboardingTourFocusRevealGroup { var displayName: string; }