diff --git a/examples/src/components/DataBinding.tsx b/examples/src/components/DataBinding.tsx index f23af29..fa5dac7 100644 --- a/examples/src/components/DataBinding.tsx +++ b/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, }); diff --git a/examples/src/components/DataBindingHooks.tsx b/examples/src/components/DataBindingHooks.tsx index 51da0a7..fe2f73c 100644 --- a/examples/src/components/DataBindingHooks.tsx +++ b/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, }); diff --git a/examples/src/components/DataBindingPreRender.tsx b/examples/src/components/DataBindingPreRender.tsx index dd9fbf3..782790b 100644 --- a/examples/src/components/DataBindingPreRender.tsx +++ b/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, diff --git a/examples/src/components/DataBindingTests.tsx b/examples/src/components/DataBindingTests.tsx index 144205c..3a80a09 100644 --- a/examples/src/components/DataBindingTests.tsx +++ b/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); diff --git a/examples/src/components/Events.tsx b/examples/src/components/Events.tsx index 0479e5a..afd056c 100644 --- a/examples/src/components/Events.tsx +++ b/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, }); diff --git a/examples/src/components/FallbackFonts.tsx b/examples/src/components/FallbackFonts.tsx index f4fe9e3..d2fc6ff 100644 --- a/examples/src/components/FallbackFonts.tsx +++ b/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, diff --git a/examples/src/components/Http.tsx b/examples/src/components/Http.tsx index 535a6b8..8da0d67 100644 --- a/examples/src/components/Http.tsx +++ b/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, }); diff --git a/examples/src/components/ResponsiveLayout.tsx b/examples/src/components/ResponsiveLayout.tsx index 3856510..4c219e9 100644 --- a/examples/src/components/ResponsiveLayout.tsx +++ b/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, diff --git a/examples/src/components/Scripting.tsx b/examples/src/components/Scripting.tsx index 43ce0a6..facbd8f 100644 --- a/examples/src/components/Scripting.tsx +++ b/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, }); diff --git a/examples/src/components/Semantics.tsx b/examples/src/components/Semantics.tsx index 683d9a7..b721336 100644 --- a/examples/src/components/Semantics.tsx +++ b/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, diff --git a/package-lock.json b/package-lock.json index 5179c37..7f76ff4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,9 @@ "version": "4.32.1", "license": "MIT", "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" }, "devDependencies": { "@babel/core": "^7.18.0", @@ -1357,21 +1357,21 @@ } }, "node_modules/@rive-app/canvas": { - "version": "2.40.1", - "resolved": "https://registry.npmjs.org/@rive-app/canvas/-/canvas-2.40.1.tgz", - "integrity": "sha512-ea9oHIoeijZOAafE6bx6+PkiiAGjL43ZeLmhJ3bRMTsvedFvWeO0x/uCx5CY36Biu75S7Xw8hI4PryYy2b1utA==", + "version": "2.41.0", + "resolved": "https://registry.npmjs.org/@rive-app/canvas/-/canvas-2.41.0.tgz", + "integrity": "sha512-07e+4+/yqRlTODczhCmoXHXZEkfAyJ+X/miXomP/f48a5pMFwX7eW1AibqkEvFxq2z4yAQokpWZSoVTMpbuqVQ==", "license": "MIT" }, "node_modules/@rive-app/canvas-lite": { - "version": "2.40.1", - "resolved": "https://registry.npmjs.org/@rive-app/canvas-lite/-/canvas-lite-2.40.1.tgz", - "integrity": "sha512-gnlvjeI344tC9vBqYW8lV9o9g8FJPtaTq6UjmFmn4q9wLXloN/u3XqdXHsdU/5uBgCd8G6fFFQh7TqtnwzRSfA==", + "version": "2.41.0", + "resolved": "https://registry.npmjs.org/@rive-app/canvas-lite/-/canvas-lite-2.41.0.tgz", + "integrity": "sha512-vCbNEhNUQTyiM8Ufk3dd2GL5m6csUZkefm8Of9/i+FuM4ftm0ZfmwQlUWAebVVuAKVKFIMpnTDGMBNw8/BVpgg==", "license": "MIT" }, "node_modules/@rive-app/webgl2": { - "version": "2.40.1", - "resolved": "https://registry.npmjs.org/@rive-app/webgl2/-/webgl2-2.40.1.tgz", - "integrity": "sha512-O+18wvdSYs+7pqXuFYULv4L4Bg5xWsCNkQZTp3s69mOO13USfTMbuE4BGysH3QsRts7UYWCaSMsgCKteEuVphQ==", + "version": "2.41.0", + "resolved": "https://registry.npmjs.org/@rive-app/webgl2/-/webgl2-2.41.0.tgz", + "integrity": "sha512-SCfy5u2q6SCyyH6H2pWYU2iEqkrQVlItxpVKks2Nk9RXQAoaFYQTTkfJHCfcrpyew/o2QxEk43HYTnQNlSMIGw==", "license": "MIT" }, "node_modules/@rollup/plugin-commonjs": { diff --git a/package.json b/package.json index 02c57fa..07b1644 100644 --- a/package.json +++ b/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" diff --git a/src/components/Rive.tsx b/src/components/Rive.tsx index 7437539..7019091 100644 --- a/src/components/Rive.tsx +++ b/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,6 +60,10 @@ 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; } @@ -53,6 +71,7 @@ export interface RiveProps { const Rive = ({ src, artboard, + stateMachine, animations, stateMachines, layout, @@ -66,6 +85,7 @@ const Rive = ({ const params = { src, artboard, + stateMachine, animations, layout, stateMachines, diff --git a/src/hooks/useStateMachineInput.ts b/src/hooks/useStateMachineInput.ts index 024157a..8a32b9a 100644 --- a/src/hooks/useStateMachineInput.ts +++ b/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