onboardly/dist/index.d.ts

React component library for Onboardly

import React from 'react';

interface OnboardlyStep {
    target: string | string[];
    title: string;
    content: string;
    position?: 'top' | 'bottom' | 'left' | 'right';
    setup?: () => void | Promise<void>;
    cleanup?: () => void;
    styles?: {
        tooltip?: React.CSSProperties;
        highlight?: React.CSSProperties;
        spotlightMask?: React.CSSProperties;
    };
}
interface OnboardlyProps {
    steps: OnboardlyStep[];
    isActive: boolean;
    onStart?: () => void;
    onEnd?: () => void;
    currentStep?: number;
    onStepChange?: (newStep: number) => void;
    classNames?: {
        tooltip?: string;
        tooltipTitle?: string;
        tooltipContent?: string;
        navigationContainer?: string;
        navigationDots?: string;
        backButton?: string;
        nextButton?: string;
        skipButton?: string;
        spotlightMask?: string;
        highlightBorder?: string;
    };
    labels?: {
        nextButton?: string;
        backButton?: string;
        skipButton?: string;
        finishButton?: string;
    };
    options?: {
        spotlightPadding?: number;
        scrollIntoViewOptions?: ScrollIntoViewOptions;
        disableOverlayClose?: boolean;
        disableKeyboardNavigation?: boolean;
        hideBackButtonOnFirstStep?: boolean;
        hideSkipButton?: boolean;
        showProgressDots?: boolean;
        highlightPulsate?: boolean;
        exitOnEscape?: boolean;
        animationDuration?: number;
        maskColor?: string;
        maskOpacity?: number;
    };
    onBeforeStepChange?: (fromStep: number, toStep: number) => boolean | Promise<boolean>;
    onAfterStepChange?: (currentStep: number) => void;
}
interface TooltipPosition {
    top: number;
    left: number;
}
interface MergedOptions {
    spotlightPadding: number;
    maskColor: string;
    maskOpacity: number;
    animationDuration: number;
    highlightPulsate: boolean;
    showProgressDots: boolean;
    exitOnEscape: boolean;
    disableOverlayClose: boolean;
    disableKeyboardNavigation: boolean;
    hideBackButtonOnFirstStep: boolean;
    hideSkipButton: boolean;
    scrollIntoViewOptions?: ScrollIntoViewOptions;
}
interface OnboardlyContextType {
    currentStepIndex: number;
    steps: OnboardlyStep[];
    isVisible: boolean;
    targetElements: Element[];
    tooltipPosition: TooltipPosition;
    options: MergedOptions;
    labels: Required<NonNullable<OnboardlyProps['labels']>>;
    classNames: OnboardlyProps['classNames'];
    changeStep: (nextStepIndex: number) => Promise<void>;
    handleNext: () => void;
    handleBack: () => void;
    handleSkip: () => void;
}

declare const Onboardly: React.FC<OnboardlyProps>;

declare const useOnboardly: () => OnboardlyContextType;

export { Onboardly, type OnboardlyProps, type OnboardlyStep, useOnboardly };