import { useState } from 'react'; import { Canvas, Meta, Story, ArgsTable } from '@storybook/addon-docs'; import RiveComponent, { useRive, useStateMachineInput } from '../../src'; import { Button } from './components/Button'; import './rive-overview.css'; # State Machine Usage Not familiar with Rive State Machines? Check out our [help docs](https://help.rive.app/editor/state-machine) on what these are first! The `useStateMachineInput` hook is a helper that makes grabbing references to state machine inputs easier to setup. This hook should be used along with the `useRive` hook, as you need to pass in the `rive` instance returned from `useRive`. See each of the examples below to see usage of the hook creating instance of three types of inputs: - Booleans - Numbers - Triggers ## Boolean inputs Once you grab a reference to the state machine input, you can get/set the value of the input via the `.value` property. **Note:** The input instance value itself is not a stateful React variable, therefore, any logic in the component dependent on an input value changing will not trigger a re-render like a React stateful variable change would. You can achieve this effect by keeping reference to the state machine input value inside a React state variable. See the example below for this pattern. {() => { const STATE_MACHINE_NAME = 'State Machine 1'; const ON_HOVER_INPUT_NAME = 'Hover'; const ON_PRESSED_INPUT_NAME = 'Pressed'; const { rive, RiveComponent: RiveComponentTouch } = useRive({ src: 'like.riv', stateMachines: STATE_MACHINE_NAME, artboard: 'New Artboard', autoplay: true, }); const [isHovered, setIsHovered] = useState(false); // Both onHoverInput and onPressedInput are boolean inputs. To transition // states we need to set the value property to true or false. const onPressedInput = useStateMachineInput( rive, STATE_MACHINE_NAME, ON_PRESSED_INPUT_NAME ); const onHoverInput = useStateMachineInput( rive, STATE_MACHINE_NAME, ON_HOVER_INPUT_NAME ); function onMouseDown() { onPressedInput.value = true; } function onMouseUp() { onPressedInput.value = false; } function onMouseEnter() { onHoverInput.value = true; setIsHovered(true); } function onMouseLeave() { onHoverInput.value = false; setIsHovered(false); } return ( <>

Hover and click on the canvas

Is cursor hovering? {isHovered ? 'Yes' : 'No'}

); }} ## Number inputs Once you grab a reference to the state machine input, you can get/set the value of the input via the `.value` property. {() => { const STATE_MACHINE_NAME = 'skill-controller'; const INPUT_NAME = 'level'; const { rive, RiveComponent: RiveComponentTouch } = useRive({ src: 'skills.riv', stateMachines: STATE_MACHINE_NAME, artboard: 'New Artboard', autoplay: true, }); // levelInput is a number state machine input. To transition the state machine, // we need to set the value to a number. For this state machine input, we need // to set to 0, 1 or 2 for a state transition to occur. const levelInput = useStateMachineInput( rive, STATE_MACHINE_NAME, INPUT_NAME ); return ( // The animation will fit to the parent element, so we set a large height // and width for this example.
Choose a level:
); }} ## Trigger inputs Unlike the boolean and number inputs, you invoke the `.fire()` method on a trigger input. {() => { const STATE_MACHINE_NAME = 'State Machine 1'; const INPUT_NAME = 'Pressed'; const { rive, RiveComponent: RiveComponentTouch } = useRive({ src: 'piggy-bank.riv', stateMachines: STATE_MACHINE_NAME, artboard: 'New Artboard', autoplay: true, }); // pressedInput in a trigger state machine input. To transition the state // we need to call the `fire()` method on the input. const pressedInput = useStateMachineInput( rive, STATE_MACHINE_NAME, INPUT_NAME ); // The animation will fit to the parent element, so we set a large height // and width for this example. return (
pressedInput.fire()} />

Click on the canvas

); }}