minor: inherit deprecations from JS runtime: animations, stateMachines, and automaticallyHandleEvents params. Deprecate the useStateMachineInput hook. Add stateMachine param to the Rive component

examples/src/components/DataBinding.tsx

@@ -16,7 +16,7 @@ const DataBinding = () => {
   const { rive, RiveComponent } = useRive({
     src: 'stocks.riv',
     artboard: 'Main',
-    stateMachines: 'State Machine 1',
+    stateMachine: 'State Machine 1',
     autoplay: true,
     autoBind: false,
   });

examples/src/components/DataBindingHooks.tsx

@@ -25,7 +25,7 @@ const CURRENCY_PROP = 'currency';
 const GlobalViewModelInstance = () => {
   const { rive, RiveComponent } = useRive({
     src: 'global_variables_test.riv',
-    stateMachines: 'State Machine 1',
+    stateMachine: 'State Machine 1',
     autoplay: false,
     autoBind: false,
   });

examples/src/components/DataBindingPreRender.tsx

@@ -17,7 +17,7 @@ const CURRENCY_PROP = 'currency';
 const GlobalViewModels = () => {
   const { RiveComponent } = useRive({
     src: 'global_variables_test.riv',
-    stateMachines: 'State Machine 1',
+    stateMachine: 'State Machine 1',
     autoplay: true,
     // set autoBind to false to set up main+global instances before first frame manually
     autoBind: false,

examples/src/components/DataBindingTests.tsx

@@ -26,7 +26,7 @@ export const StringPropertyTest = ({ src }: { src: string }) => {
         autoplay: true,
         artboard: "Artboard",
         autoBind: true,
-        stateMachines: "State Machine 1",
+        stateMachine: "State Machine 1",
     });
 
     const { value: name, setValue: setName } = useViewModelInstanceString('name', rive?.viewModelInstance);
@@ -59,7 +59,7 @@ export const NumberPropertyTest = ({ src }: { src: string }) => {
         autoplay: true,
         artboard: "Artboard",
         autoBind: true,
-        stateMachines: "State Machine 1",
+        stateMachine: "State Machine 1",
     });
 
     const { value: age, setValue: setAge } = useViewModelInstanceNumber('age', rive?.viewModelInstance);
@@ -93,7 +93,7 @@ export const BooleanPropertyTest = ({ src }: { src: string }) => {
         autoplay: true,
         artboard: "Artboard",
         autoBind: true,
-        stateMachines: "State Machine 1",
+        stateMachine: "State Machine 1",
     });
 
     const { value: agreedToTerms, setValue: setAgreedToTerms } = useViewModelInstanceBoolean('agreedToTerms', rive?.viewModelInstance);
@@ -138,7 +138,7 @@ export const ColorPropertyTest = ({ src }: { src: string }) => {
         autoplay: true,
         artboard: "Artboard",
         autoBind: true,
-        stateMachines: "State Machine 1",
+        stateMachine: "State Machine 1",
     });
 
 
@@ -191,7 +191,7 @@ export const EnumPropertyTest = ({ src }: { src: string }) => {
         autoplay: true,
         artboard: "Artboard",
         autoBind: true,
-        stateMachines: "State Machine 1",
+        stateMachine: "State Machine 1",
     });
 
     const { value: country, setValue: setCountry, values: countries } = useViewModelInstanceEnum('country', rive?.viewModelInstance);
@@ -226,7 +226,7 @@ export const NestedViewModelTest = ({ src }: { src: string }) => {
         autoplay: true,
         artboard: "Artboard",
         autoBind: true,
-        stateMachines: "State Machine 1",
+        stateMachine: "State Machine 1",
     });
 
     const { value: drinkType, setValue: setDrinkType, values: drinkTypes } = useViewModelInstanceEnum('favDrink/type', rive?.viewModelInstance);
@@ -263,7 +263,7 @@ export const TriggerPropertyTest = ({ src }: { src: string }) => {
         autoplay: true,
         autoBind: true,
         artboard: "Artboard",
-        stateMachines: "State Machine 1",
+        stateMachine: "State Machine 1",
     });
 
 
@@ -315,7 +315,7 @@ export const PersonForm = ({ src }: { src: string }) => {
         autoplay: true,
         autoBind: true,
         artboard: "Artboard",
-        stateMachines: "State Machine 1",
+        stateMachine: "State Machine 1",
     });
 
     const { value: name, setValue: setName } = useViewModelInstanceString('name', rive?.viewModelInstance);
@@ -469,7 +469,7 @@ export const PersonInstances = ({ src }: { src: string }) => {
         src,
         autoplay: true,
         artboard: "Artboard",
-        stateMachines: "State Machine 1",
+        stateMachine: "State Machine 1",
     });
 
     const viewModel = useViewModel(rive, { name: 'PersonViewModel' });
@@ -537,7 +537,7 @@ export const ImagePropertyTest = ({ src }: { src: string }) => {
     const { rive, RiveComponent } = useRive({
         src,
         artboard: "Artboard",
-        stateMachines: "State Machine 1",
+        stateMachine: "State Machine 1",
         autoplay: true,
         autoBind: false,
     });
@@ -636,7 +636,7 @@ export const FontPropertyTest = ({ src }: { src: string }) => {
 
     const { rive, RiveComponent } = useRive({
         src,
-        stateMachines: 'State Machine 1',
+        stateMachine: 'State Machine 1',
         autoplay: true,
         autoBind: true,
     });
@@ -767,7 +767,7 @@ export const TodoListTest = ({ src }: { src: string }) => {
         autoplay: true,
         artboard: "Artboard",
         autoBind: false,
-        stateMachines: "State Machine 1",
+        stateMachine: "State Machine 1",
     });
 
     const viewModel = useViewModel(rive, { name: 'TodoList' });
@@ -896,7 +896,7 @@ export const ArtboardPropertyTest = ({ src }: { src: string }) => {
         autoplay: true,
         artboard: "Main",
         autoBind: true,
-        stateMachines: "State Machine 1",
+        stateMachine: "State Machine 1",
     });
 
     const { setValue: setArtboard1 } = useViewModelInstanceArtboard('artboard_1', rive?.viewModelInstance);

examples/src/components/Events.tsx

@@ -4,7 +4,7 @@ import { useRive, EventType, RiveEventType } from '@rive-app/react-canvas';
 const Events = () => {
   const { rive, RiveComponent } = useRive({
     src: 'rating.riv',
-    stateMachines: 'State Machine 1',
+    stateMachine: 'State Machine 1',
     autoplay: true,
     automaticallyHandleEvents: true,
   });

examples/src/components/FallbackFonts.tsx

@@ -37,7 +37,7 @@ const FallbackFonts = () => {
     src: "fallback-fonts-3.riv",
     autoplay: true,
     autoBind: true,
-    stateMachines: "State Machine 1",
+    stateMachine: "State Machine 1",
     layout: new Layout({
       fit: Fit.Contain,
       alignment: Alignment.Center,

examples/src/components/Http.tsx

@@ -4,7 +4,7 @@ import { useRive } from '@rive-app/react-canvas';
 const Http = () => {
   const { RiveComponent } = useRive({
     src: 'https://cdn.rive.app/animations/vehicles.riv',
-    stateMachines: 'bumpy',
+    stateMachine: 'bumpy',
     autoplay: true,
   });
 

examples/src/components/ResponsiveLayout.tsx

@@ -5,7 +5,7 @@ const ResponsiveLayout = () => {
   const { RiveComponent } = useRive({
     src: 'layout_test.riv',
     artboard: 'Artboard',
-    stateMachines: 'State Machine 1',
+    stateMachine: 'State Machine 1',
     autoplay: true,
     layout: new Layout({
       fit: Fit.Layout,

examples/src/components/Scripting.tsx

@@ -5,7 +5,7 @@ const ScriptedEffect = () => {
   const { RiveComponent } = useRive({
     src: 'scripted-path-effect.riv',
     artboard: 'Multishape',
-    stateMachines: "State Machine 1",
+    stateMachine: "State Machine 1",
     autoplay: true,
   });
 

examples/src/components/Semantics.tsx

@@ -65,7 +65,7 @@ const RiveStage = ({ source, label, fit, scale, onLog }: RiveStageProps) => {
 
   const { rive, RiveComponent } = useRive({
     ...source,
-    stateMachines: 'State Machine 1',
+    stateMachine: 'State Machine 1',
     autoplay: true,
     autoBind: true,
     layout,

package.json

@@ -35,9 +35,9 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas": "2.40.1",
-    "@rive-app/canvas-lite": "2.40.1",
-    "@rive-app/webgl2": "2.40.1"
+    "@rive-app/canvas": "2.41.0",
+    "@rive-app/canvas-lite": "2.41.0",
+    "@rive-app/webgl2": "2.41.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"

src/components/Rive.tsx

@@ -12,12 +12,26 @@ export interface RiveProps {
    * Defaults to the first artboard created.
    */
   artboard?: string;
+  /**
+   * Name of the state machine to play.
+   */
+  stateMachine?: string;
   /**
    * Specify a starting animation to play.
+   *
+   * @deprecated Use the `stateMachine` prop to play a state machine instead.
+   * Support for starting playback with named animations will be removed in a
+   * future major version. See
+   * {@link https://rive.app/docs/editor/state-machine/state-machine} for more on
+   * setting up state machines in your Rive file.
    */
   animations?: string | string[];
   /**
    * Specify a starting state machine to play.
+   *
+   * @deprecated Use `stateMachine` with a single state machine name instead.
+   * Support for playing multiple state machines at once will be removed in a
+   * future major version.
    */
   stateMachines?: string | string[];
   /**
@@ -46,13 +60,18 @@ export interface RiveProps {
    * This flag is false by default to prevent any unwanted behaviors from taking place.
    * This means any special Rive Event will have to be handled manually by subscribing to
    * EventType.RiveEvent
+   *
+   * @deprecated Rive Events are deprecated and will be removed in a future
+   * major version: please use data binding instead. See
+   * {@link https://rive.app/docs/runtimes/web/rive-events} for how to migrate.
    */
   automaticallyHandleEvents?: boolean;
 }
 
 const Rive = ({
   src,
   artboard,
+  stateMachine,
   animations,
   stateMachines,
   layout,
@@ -66,6 +85,7 @@ const Rive = ({
   const params = {
     src,
     artboard,
+    stateMachine,
     animations,
     layout,
     stateMachines,

src/hooks/useStateMachineInput.ts

@@ -4,6 +4,11 @@ import { EventType, Rive, StateMachineInput } from '@rive-app/canvas';
 /**
  * Custom hook for fetching a stateMachine input from a rive file.
  *
+ * @deprecated State machine inputs are deprecated and will be removed in a
+ * future major version: please use data binding properties instead. See
+ * {@link https://rive.app/docs/editor/data-binding/migration-guide#state-machine-inputs}
+ * for how to migrate.
+ *
  * @param rive - Rive instance
  * @param stateMachineName - Name of the state machine
  * @param inputName - Name of the input