Update examples to use latest rive-react

.release-it.json

@@ -12,6 +12,6 @@
     "releaseName": "${version}"
   },
   "hooks": {
-    "after:bump": "npx auto-changelog -p"
+    "after:bump": ["npx auto-changelog -p", "git add ./CHANGELOG.md"]
   }
 }

README.md

@@ -73,7 +73,7 @@ export default Example;
 
 #### Parameters
 
-- `riveParams`: Set of parameters that are passed to the Rive.js `Rive` class constructor. `null` and `undefined` can be passed to conditionally display the .rive file.
+- `riveParams`: Set of parameters that are passed to the Rive.js `Rive` class constructor. `null` and `undefined` can be passed to conditionally display the .riv file.
 - `opts`: Rive React specific options.
 
 #### Return Values
@@ -115,20 +115,30 @@ The `useStateMachineInput` hook is provided to make it easier to interact with s
 import { useRive, useStateMachineInput } from 'rive-react';
 
 function Example() {
+  const STATE_MACHINE_NAME = 'button';
+  const INPUT_NAME = 'onClick';
+
   const { RiveComponent, rive } = useRive({
     src: 'button.riv',
-    stateMachines: 'button',
+    stateMachines: STATE_MACHINE_NAME,
     autoplay: true,
   });
 
-  const onClickInput = useStateMachineInput(rive, 'button', 'onClick');
+  const onClickInput = useStateMachineInput(
+    rive,
+    STATE_MACHINE_NAME,
+    INPUT_NAME
+  );
 
-  return <RiveComponent onClick={() => onClickInput && onClickInput.fire())} />;
+  // This example is using a state machine with a trigger input.
+  return <RiveComponent onClick={() => onClickInput.fire()} />;
 }
 
 export default Example;
 ```
 
+See our [examples](examples) folder for working examples of [Boolean](examples/state-machine-boolean-input) and [Number](examples/state-machine-number-input) inputs.
+
 #### Parameters
 
 - `rive`: A `Rive` object. This is returned by the `useRive` hook.
@@ -141,4 +151,4 @@ A Rive.js `stateMachineInput` object.
 
 ## Examples
 
-The `examples` shows a number of different ways to use Rive React. See the instructions for each example to run locally.
+The [examples](examples) shows a number of different ways to use Rive React. See the instructions for each example to run locally.

examples/basic-typescript/package.json

@@ -13,7 +13,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "rive-react": "0.0.1",
+    "rive-react": "latest",
     "typescript": "^4.3.2",
     "web-vitals": "^1.1.2"
   },

examples/basic-typescript/src/App.tsx

@@ -1,8 +1,8 @@
-import { useRive, UseRiveParameters } from "rive-react";
+import { useRive, UseRiveParameters } from 'rive-react';
 
 function App() {
   const params: UseRiveParameters = {
-    src: "poison-loader.riv",
+    src: 'poison-loader.riv',
     autoplay: true,
   };
 
@@ -10,7 +10,7 @@ function App() {
 
   return (
     // The animation will fit to the parent element.
-    <div style={{ height: "500px", width: "500px" }}>
+    <div style={{ height: '500px', width: '500px' }}>
       <RiveComponent />
     </div>
   );

examples/basic-typescript/src/index.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById('root')
 );

examples/basic-with-hook/package.json

@@ -9,7 +9,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "rive-react": "0.0.1",
+    "rive-react": "latest",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

examples/basic-with-hook/src/App.js

@@ -1,8 +1,8 @@
-import { useRive } from "rive-react";
+import { useRive } from 'rive-react';
 
 function App() {
   const params = {
-    src: "poison-loader.riv",
+    src: 'poison-loader.riv',
     autoplay: true,
   };
 
@@ -10,7 +10,7 @@ function App() {
 
   return (
     // The animation will fit to the parent element.
-    <div style={{ height: "500px", width: "500px" }}>
+    <div style={{ height: '500px', width: '500px' }}>
       <RiveComponent />
     </div>
   );

examples/basic-with-hook/src/index.js

@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById('root')
 );

examples/basic/package.json

@@ -9,7 +9,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "rive-react": "0.0.1",
+    "rive-react": "latest",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

examples/basic/src/App.js

@@ -1,9 +1,9 @@
-import Rive from "rive-react";
+import Rive from 'rive-react';
 
 function App() {
   return (
     // The animation will fit to the parent element.
-    <div style={{ height: "500px", width: "500px" }}>
+    <div style={{ height: '500px', width: '500px' }}>
       <Rive src="poison-loader.riv" autoplay />
     </div>
   );

examples/basic/src/index.js

@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById('root')
 );

examples/play-on-hover/package.json

@@ -9,7 +9,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "rive-react": "0.0.1",
+    "rive-react": "latest",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

examples/play-on-hover/src/App.js

@@ -1,8 +1,8 @@
-import { useRive } from "rive-react";
+import { useRive } from 'rive-react';
 
 function App() {
   const params = {
-    src: "poison-loader.riv",
+    src: 'poison-loader.riv',
     autoplay: false,
   };
 
@@ -23,7 +23,7 @@ function App() {
   }
 
   return (
-    <div style={{ height: "600px", width: "600px" }}>
+    <div style={{ height: '600px', width: '600px' }}>
       <RiveComponent onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />
     </div>
   );

examples/play-on-hover/src/index.js

@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById('root')
 );

examples/play-pause-button/package.json

@@ -9,7 +9,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "rive-react": "0.0.1",
+    "rive-react": "latest",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

examples/play-pause-button/public/index.html

@@ -8,7 +8,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <title>Rive React - Basic with Hook</title>
+    <title>Rive React - Play/Pause Button</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

examples/play-pause-button/src/App.js

@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
-import { useRive } from "rive-react";
+import { useEffect, useState } from 'react';
+import { useRive } from 'rive-react';
 
 function App() {
-  const [buttonText, setButtonText] = useState("Pause");
+  const [buttonText, setButtonText] = useState('Pause');
   const { RiveComponent, rive } = useRive({
-    src: "poison-loader.riv",
+    src: 'poison-loader.riv',
     autoplay: true,
   });
 
@@ -12,13 +12,13 @@ function App() {
     if (rive) {
       // "play" event is fired when the animation starts to play, so we update
       // button text on this event.
-      rive.on("play", () => {
-        setButtonText("Pause");
+      rive.on('play', () => {
+        setButtonText('Pause');
       });
 
       // As above, the "pause" event is fired when the animation pauses.
-      rive.on("pause", () => {
-        setButtonText("Play");
+      rive.on('pause', () => {
+        setButtonText('Play');
       });
     }
     // We listen for changes to the rive object. The rive object will be null
@@ -40,7 +40,7 @@ function App() {
   return (
     // The animation will fit to the parent element, so we set a large height
     // and width for this example.
-    <div style={{ height: "500px", width: "500px" }}>
+    <div style={{ height: '500px', width: '500px' }}>
       <RiveComponent />
       <button onClick={onButtonClick}>{buttonText}</button>
     </div>

examples/play-pause-button/src/index.js

@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById('root')
 );

examples/state-machine-boolean-input/README.md

@@ -1,4 +1,4 @@
-# State Machine Button
+# State Machine Boolean Input
 
 This example shows how to interact with a state machine, using various onMouse\* callbacks to trigger transations.
 

examples/state-machine-boolean-input/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "state-machine-boolean-input",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.13.0",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "rive-react": "latest",
+    "web-vitals": "^1.1.2"
+  },
+  "scripts": {
+    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/state-machine-boolean-input/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <title>Rive React - State Machine Boolean Input</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

examples/state-machine-boolean-input/src/App.js

@@ -0,0 +1,58 @@
+import { useRive, useStateMachineInput } from 'rive-react';
+
+function App() {
+  const STATE_MACHINE_NAME = 'State Machine 1';
+  const ON_HOVER_INPUT_NAME = 'Hover';
+  const ON_PRESSED_INPUT_NAME = 'Pressed';
+
+  const { RiveComponent, rive } = useRive({
+    src: 'like.riv',
+    stateMachines: STATE_MACHINE_NAME,
+    artboard: 'New Artboard',
+    autoplay: true,
+  });
+
+  // Both onHoverInput and onPressedInput are boolean inputs. To transition
+  // states we need to set the value property to true or false.
+  const onHoverInput = useStateMachineInput(
+    rive,
+    STATE_MACHINE_NAME,
+    ON_HOVER_INPUT_NAME
+  );
+  const onPressedInput = useStateMachineInput(
+    rive,
+    STATE_MACHINE_NAME,
+    ON_PRESSED_INPUT_NAME
+  );
+
+  function onMouseEnter() {
+    onHoverInput.value = true;
+  }
+
+  function onMouseLeave() {
+    onHoverInput.value = false;
+  }
+
+  function onMouseDown() {
+    onPressedInput.value = true;
+  }
+
+  function onMouseUp() {
+    onPressedInput.value = false;
+  }
+
+  return (
+    // The animation will fit to the parent element, so we set a large height
+    // and width for this example.
+    <div style={{ height: '500px', width: '500px' }}>
+      <RiveComponent
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onMouseDown={onMouseDown}
+        onMouseUp={onMouseUp}
+      />
+    </div>
+  );
+}
+
+export default App;

examples/state-machine-boolean-input/src/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

examples/state-machine-button/src/App.js

@@ -1,54 +0,0 @@
-import { useRive, useStateMachineInput } from "rive-react";
-
-function App() {
-  const { RiveComponent, rive } = useRive({
-    src: "like.riv",
-    stateMachines: "State Machine 1",
-    artboard: "New Artboard",
-    autoplay: true,
-  });
-
-  const hoverInput = useStateMachineInput(rive, "State Machine 1", "Hover");
-  const pressedInput = useStateMachineInput(rive, "State Machine 1", "Pressed");
-
-  function onMouseEnter() {
-    // state machine inputs will be null until the rive file has loaded, so we
-    // put these guards in place to avoid any errors.
-    if (hoverInput) {
-      hoverInput.value = true;
-    }
-  }
-
-  function onMouseLeave() {
-    if (hoverInput) {
-      hoverInput.value = false;
-    }
-  }
-
-  function onMouseDown() {
-    if (pressedInput) {
-      pressedInput.value = true;
-    }
-  }
-
-  function onMouseUp() {
-    if (pressedInput) {
-      pressedInput.value = false;
-    }
-  }
-
-  return (
-    // The animation will fit to the parent element, so we set a large height
-    // and width for this example.
-    <div style={{ height: "500px", width: "500px" }}>
-      <RiveComponent
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        onMouseDown={onMouseDown}
-        onMouseUp={onMouseUp}
-      />
-    </div>
-  );
-}
-
-export default App;

examples/state-machine-button/src/index.js

@@ -1,10 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById("root")
-);

examples/state-machine-number-input/README.md

@@ -0,0 +1,14 @@
+# State Machine Number Input
+
+This example shows how to interact with a state machine with number inputs. We trigger the transistions by changing the value of a number input.
+
+## To Run
+
+This example is created using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html).
+
+To install and run:
+
+```
+npm install
+npm start
+```

examples/state-machine-number-input/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "state-machine-button",
+  "name": "state-machine-number-input",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
@@ -9,7 +9,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "rive-react": "0.0.1",
+    "rive-react": "latest",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

examples/state-machine-number-input/public/index.html

@@ -8,7 +8,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <title>Rive React - Basic with Hook</title>
+    <title>Rive React - State Machine Number Input</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

examples/state-machine-number-input/src/App.js

@@ -0,0 +1,34 @@
+import { useRive, useStateMachineInput } from 'rive-react';
+
+function App() {
+  const STATE_MACHINE_NAME = 'State Machine ';
+  const INPUT_NAME = 'Level';
+
+  const { RiveComponent, rive } = 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.
+    <div style={{ height: '500px', width: '500px' }}>
+      <RiveComponent />
+      <div>
+        Level:
+        <button onClick={() => (levelInput.value = 0)}>0</button>
+        <button onClick={() => (levelInput.value = 1)}>1</button>
+        <button onClick={() => (levelInput.value = 2)}>2</button>
+      </div>
+    </div>
+  );
+}
+
+export default App;

examples/state-machine-number-input/src/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

examples/state-machine-trigger-input/README.md

@@ -0,0 +1,14 @@
+# State Machine Trigger Input
+
+This example shows how to interact with a state machine with a trigger input. We call the `fire()` function on the state machine input to transition the state when the animation is clicked.
+
+## To Run
+
+This example is created using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html).
+
+To install and run:
+
+```
+npm install
+npm start
+```

examples/state-machine-trigger-input/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "state-machine-trigger-input",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.13.0",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "rive-react": "latest",
+    "web-vitals": "^1.1.2"
+  },
+  "scripts": {
+    "start": "SKIP_PREFLIGHT_CHECK=true react-scripts start"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

examples/state-machine-trigger-input/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <title>Rive React - State Machine Trigger Input</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

examples/state-machine-trigger-input/src/App.js

@@ -0,0 +1,31 @@
+import { useRive, useStateMachineInput } from 'rive-react';
+
+function App() {
+  const STATE_MACHINE_NAME = 'State Machine 1';
+  const INPUT_NAME = 'Pressed';
+
+  const { RiveComponent, rive } = 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
+  );
+
+  return (
+    // The animation will fit to the parent element, so we set a large height
+    // and width for this example.
+    <div style={{ height: '500px', width: '500px' }}>
+      <RiveComponent onClick={() => pressedInput.fire()} />
+    </div>
+  );
+}
+
+export default App;

examples/state-machine-trigger-input/src/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);