v0.7.0

Added the ability to set a callback on ReactGrandTour for when the current step changes.

export type OnStepChangeProps = {
    fromStepIndex: number;
    toStepIndex: number;
    totalSteps: number;

    fromStep: ReactGrandTourStep;
    toStep: ReactGrandTourStep;
};

const App = () => {
    const onStepChange = useCallback(
        ({ fromStepIndex, toStep, toStepIndex, fromStep, totalSteps }: OnStepChangeProps) => {
            console.log({ fromStepIndex, toStep, toStepIndex, fromStep, totalSteps });
        },
        [],
    );
    return (
        <ReactGrandTour steps={Steps} onStepChange={onStepChange}>
            {... application ...}
        </ReactGrandTour>
   )
}.

v0.6.1

Removed a console log in the source code

v0.6.0

Added the ability to set custom keyboard shortcuts for

• Closing the tour
• Going to the next step
• Going back a step

Supports multiple keys being set for each action.

    <ReactGrandTour
        steps={Steps}
        keyboardShortcuts={{
            closeModal: ['Escape'],
            prevStep: ['ArrowLeft'],
            nextStep: ['ArrowRight'],
        }}
    >
        {... application ...}
    </ReactGrandTour>

New shortcuts type:

/**
 * See article below for key names
 * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
 */
export type ReactGrandTourShortcuts = {
    /**
     * Default: "Escape"
     *
     * Shortcut for closing the tour.
     */
    closeModal?: string[];

    /**
     *  Default: "ArrowRight"
     *
     *  Shortcut for going to the next step.
     */
    nextStep?: string[];

    /**
     *  Default: "ArrowLeft"
     *
     *  Shortcut for going to the previous step.
     */
    prevStep?: string[];
};

v0.5.0

Added the ability to override some default styling via a new prop called stylingOverrides.

Example:

    <ReactGrandTour
        steps={Steps}
        stylingOverrides={{
            primaryColor: 'red',
            closeButtonColor: 'yellow',
            closeButtonHoverColor: 'red',
        }}
    >

Overrides type:

export type ReactGrandTourStylingOverrides = {
    primaryColor?: string;
    animationSpeed?: number;

    dotBackgroundColor?: string;
    dotBorderColor?: string;
    dotHoverBackgroundColor?: string;

    chevronButtonColor?: string;
    chevronButtonHoverColor?: string;
    chevronButtonDisabledColor?: string;

    closeButtonColor?: string;
    closeButtonHoverColor?: string;

    modalBackgroundColor?: string;
}

v0.4.0

Added new props to <ReactGrandTour /> which allow you to disable to closure of the tour.

    // disable the tour closing when the user presses the "Escape" key
    disableCloseOnEscape?: boolean;

    // disable and hide the tour's close button
    disableCloseBtn?: boolean;

    // disable the tour closing the the user presses on the transparent backdrop 
    disableCloseOnBackdropClick?: boolean;