v0.16.0

• Updated to Vite 4.5
• Upgraded React version
• Upgraded Typescript version

v0.14.0

Fixed a logic flaw which prevented the tour from closing when providing your own onClose prop

v0.13.0

Fixed properly clearing the interval when setting track to true on a tour step

v0.12.0

Updated the close button component override so it no longer wraps your custom button in its own button.

New CloseButtonProps type:

export type CloseButtonProps = {
    close: ReactGrandTourProps['onClose'];

    // wrap your own close button component in this component to position your component in the same
    // place as the default close button
    PositionalWrapper: React.FC<PropsWithChildren<any>>;
};

Example usage:

const MyCustomCloseButton: React.FC<CloseButtonProps> = ({ close, PositionalWrapper }) => (
    <PositionalWrapper>
        <MyCustomButton onClick={close} />
    </PositionalWrapper>
);

v0.11.2

Fixed the auto open prop focusing on the first element correctly.

<ReactGrandTour steps={steps} open>
    ....
</ReactGrandTour>

v0.11.1

Removed a console.log which made it into the build

v0.11.0

ReactGrandTourStylingOverrides changes

• Replaced dotBorderColor with dotBorder
• Added dotHoverBorder

Component Visibility:

• Added new ComponentVisibility type. Can control whether components should be hidden on a per tour or per step basis. Step props take precedent. (See Readme)
• Added new hideStepElementHighlight boolean prop to ReactGrandTourStep. Allows you to hide the elemental highlight, so you can have a full screen of a backdrop.

Other:

• Added close function prop to NextStepButtonProps & PreviousStepButtonProps. This will allow you to close the tour when overriding the next/prev button components

v0.10.0

Fixed build output. Sorry!

v0.9.0

Updated to use Vite instead of webpack so there are now es and cjs builds.

v0.8.0

Added the ability to set a preferred position for the tour modal per step.

(all ReactGrandTourStep props https://github.com/EitanElbaz/ReactGrandTour/blob/main/src/types.ts#L106)

export type ReactGrandTourStep = {
...existing props
    /**
     * If set, will position the modal in the position indicated, if there is space.
     *
     * Default: auto
     */
    preferredModalPosition?: 'auto' | 'top' | 'right' | 'bottom' | 'left';
};

Example of use can be found here https://github.com/EitanElbaz/ReactGrandTour/blob/main/playground/src/tours/Home.tsx#L138

Example in action can be found at the bottom of this page https://eitanelbaz.github.io/ReactGrandTour/