Inputs

DEPRECATION NOTICE: This entire page documents the legacy Inputs system. For new projects: Use Data Binding instead. For existing projects: Plan to migrate from Inputs to Data Binding as soon as possible. This content is provided for legacy support only.

For more information on creating Inputs in Rive, please refer to: Inputs.

Controlling state machine inputs

Once the Rive file is loaded and instantiated, the state machine can be queried for inputs, and these input values can be set, and in the case of triggers, fired, all programmatically.

Inputs can also be set on components at runtime, see Nested Inputs below.

Example

Setting state machine inputs (React)

The react runtime provides a useStateMachineInput hook to make the process of retrieving a state machine input much simpler than that of the basic web runtime.

import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

export default function Simple() {
    const { rive, RiveComponent } = useRive({
        src: "https://cdn.rive.app/animations/vehicles.riv",
        stateMachines: "bumpy",
        autoplay: true,
    });

    const bumpInput = useStateMachineInput(rive, "bumpy", "bump");

    return (
        <RiveComponent
            style={{ height: "1000px" }}
            onClick={() => bumpInput && bumpInput.fire()}
        />
    );
}

Nested Inputs

⚠️ DEPRECATED FEATURE: Nested Inputs are part of the legacy Inputs system. Use Data Binding instead for controlling component properties at runtime.

You can control the inputs of Components at runtime. These inputs are not on the main artboard but on a component. To set a nested input, you need to know the path where the input exists at an artboard level.

Example

Use the artboard’s unique hierarchy name, not the artboard’s name.
Do not include the name of the main artboard. In the example above, the path is Volume Molecule, not Menu/Volume Molecule.
Ensure the components are marked as exported in the editor to access them at runtime:

You can go as many components deep as needed. For example, the Volume Molecule artboard shown above has two components with the following unique hierarchy names:

Volume Component
FX Component

Once you go more than one component deep the path will be a / separated string of the unique hierarchy names.

If you load in the Menu artboard at runtime, and want to get/set an input on the FX Component artboard, the path will be Volume Molecule/FX Component

Do not use / in the name for your components, as that will break the search functionality at runtime.

To set the Volume input for the above example:

const {rive, RiveComponent} = useRive({...});

useEffect(() => {
  if (rive) {
    rive?.setNumberStateAtPath("volume", 80.0, "Volume Molecule/Volume Component");
  }
}, [rive]);

All options:

setNumberStateAtPath(inputName: string, value: number, path: string)
setBooleanStateAtPath(inputName: string, value: boolean, path: string)
fireStateAtPath(inputName: string, path: string)

Runtimes

Integrations

Inputs

Controlling state machine inputs

Example

Inputs

Nested Inputs

Example

​Controlling state machine inputs

​Example

​Inputs

​Nested Inputs

​Example

Controlling state machine inputs

Example

Inputs

Nested Inputs

Example