-
Notifications
You must be signed in to change notification settings - Fork 584
Open
Description
🐛 Bug Report
On the next
branch the default beacon animation doesn't appear to be working. The animation remains static.
To Reproduce
Create a simple tour button react component that toggles the tour. In my example I'm using tailwind-css, nextJS and HeroUI.
"use client";
import { Button } from "@heroui/react";
import { Icon } from "@iconify/react";
import Joyride, { STATUS } from 'react-joyride';
import { useState } from "react";
import { tourSteps } from "./TourSteps";
interface JoyrideCallback {
action: string;
controlled: boolean;
index: number;
lifecycle: string;
origin: string | null;
size: number;
status: string;
step: { /* the current step */ };
type: string;
}
export default function TourButton() {
const [run, setRun] = useState(false);
const handleJoyrideCallback = (data: JoyrideCallback) => {
const { status } = data;
if ([STATUS.FINISHED, STATUS.ERROR].includes(status as "finished" | "error")) {
setRun(false);
}
};
return (
<>
<Button
startContent={<Icon icon="solar:play-bold" />}
size="sm"
className="bg-red-500 text-white"
onPress={() => setRun(true)}
>
Take Tour
</Button>
<Joyride
run={run}
steps={tourSteps}
showProgress={true}
callback={handleJoyrideCallback}
/>
</>
);
}
Execute the tour. The Beacon shows with correct CSS but the animation is not working.
Expected behavior
The animation should work just like it does on the main
branch and 2.x releases.
Link to repl or repo (highly encouraged)
I can set one up if no reproduction can be make with the above simple example. My code is close source unfrotunately.
Run npx envinfo --system --binaries --npmPackages react-joyride
Paste the results here:
System:
OS: macOS 15.3.2
CPU: (12) arm64 Apple M2 Pro
Memory: 367.95 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 23.6.0 - ~/.nvm/versions/node/v23.6.0/bin/node
npm: 11.1.0 - ~/.nvm/versions/node/v23.6.0/bin/npm
npmPackages:
react-joyride: ^3.0.0-7 => 3.0.0-7
Metadata
Metadata
Assignees
Labels
No labels