@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
TypeScript
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;
}