import { useState, useEffect } from "react";
import { useRive, Layout, Fit } from "@rive-app/react-canvas";
export default function App() {
const [truckButtonText, setTruckButtonText] = useState("Start Truck");
const [wiperButtonText, setWiperButtonText] = useState("Start Wipers");
// animation will show the first frame but not start playing
const { rive, RiveComponent } = useRive({
src: "https://cdn.rive.app/animations/vehicles.riv",
layout: new Layout({ fit: Fit.Cover }),
// Listen for play events to update button text
rive.on("play", (event) => {
const names = event.data;
names.forEach((name) => {
setTruckButtonText("Stop Truck");
} else if (name === "windshield_wipers") {
setWiperButtonText("Stop Wipers");
// Listen for pause events to update button text
rive.on("pause", (event) => {
const names = event.data;
names.forEach((name) => {
setTruckButtonText("Start Truck");
} else if (name === "windshield_wipers") {
setWiperButtonText("Start Wipers");
function onStartTruckClick() {
if (rive.playingAnimationNames.includes("idle")) {
function onStartWiperClick() {
if (rive.playingAnimationNames.includes("windshield_wipers")) {
rive.pause("windshield_wipers");
rive.play("windshield_wipers");
<RiveComponent style={{ height: "1000px" }} />
<button id="idle" onClick={onStartTruckClick}>
<button id="wipers" onClick={onStartWiperClick}>