chore: release 0.0.13

.release-it.json

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

CHANGELOG.md

@@ -4,74 +4,9 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-#### [v0.0.26](https://github.com/rive-app/rive-react/compare/v0.0.20...v0.0.26)
+#### [v0.0.13](https://github.com/rive-app/rive-react/compare/v0.0.9...v0.0.13)
 
-- bump rive-js to0.7.33 [`c4dc027`](https://github.com/rive-app/rive-react/commit/c4dc027522502f6aaa0f85392a5e90396c8b719d)
-
-#### [v0.0.20](https://github.com/rive-app/rive-react/compare/v0.0.19...v0.0.20)
-
-> 7 September 2021
-
-- chore: release 0.0.20 [`1c3cc69`](https://github.com/rive-app/rive-react/commit/1c3cc69f401b91810105b16ccce1dd7612da037a)
-- rive-0.7.30: Fix ghosting where aspect ratio of canvas is different to that of artboard [`44056eb`](https://github.com/rive-app/rive-react/commit/44056eb5654e90de6ba10ed4892a4e2a5ebf6716)
-
-#### [v0.0.19](https://github.com/rive-app/rive-react/compare/v0.0.18...v0.0.19)
-
-> 7 September 2021
-
-- chore: release 0.0.19 [`a9c3233`](https://github.com/rive-app/rive-react/commit/a9c3233452d9f6465c761cda0763d314ba712267)
-- Update rive-js to 0.7.29 [`ce2c706`](https://github.com/rive-app/rive-react/commit/ce2c7065f567e43cfcca4c8f98e98aaf6e92f4c3)
-
-#### [v0.0.18](https://github.com/rive-app/rive-react/compare/v0.0.17...v0.0.18)
-
-> 12 August 2021
-
-- chore: release 0.0.18 [`203faf9`](https://github.com/rive-app/rive-react/commit/203faf9ce22ee307af815ebdc2790f6bacbe0016)
-- Update rive-js version to 0.7.25 [`fd0efb1`](https://github.com/rive-app/rive-react/commit/fd0efb1b815ae833e3b50b643b00464542f6f800)
-
-#### [v0.0.17](https://github.com/rive-app/rive-react/compare/v0.0.16...v0.0.17)
-
-> 12 August 2021
-
-- chore: release 0.0.17 [`11b6f2e`](https://github.com/rive-app/rive-react/commit/11b6f2e8792781ad38dce745f080b69a94c35c3a)
-- Update rive-js version to 0.7.24 [`8a1adf1`](https://github.com/rive-app/rive-react/commit/8a1adf147d25f4616ef048a84986314e9397ad43)
-
-#### [v0.0.16](https://github.com/rive-app/rive-react/compare/v0.0.15...v0.0.16)
-
-> 11 August 2021
-
-- chore: release 0.0.16 [`80ffb5e`](https://github.com/rive-app/rive-react/commit/80ffb5ee2d3b3dd22d1c229e1f4e772e7fe763b3)
-- Update rive-js version to 0.7.23 [`cf1baa6`](https://github.com/rive-app/rive-react/commit/cf1baa6661f643996e37b26a5a9a6dd9a9950e06)
-
-#### [v0.0.15](https://github.com/rive-app/rive-react/compare/v0.0.14...v0.0.15)
-
-> 30 July 2021
-
-- chore: release 0.0.15 [`f0b1aeb`](https://github.com/rive-app/rive-react/commit/f0b1aeb7d850103b61310c9251a827f835fadf58)
-- update rive-js with support for distance and transform constraints [`8612e0b`](https://github.com/rive-app/rive-react/commit/8612e0b15f6c93d4e5c276c95e7f36543466e4d6)
-
-#### [v0.0.14](https://github.com/rive-app/rive-react/compare/v0.0.11...v0.0.14)
-
-> 21 July 2021
-
-- Bump rive-js to 0.7.19 with support for IK constraints [`6c80c53`](https://github.com/rive-app/rive-react/commit/6c80c5311e99ee47e9f4fc3c5f35ab908ddfa326)
-- chore: release 0.0.14 [`d7f7eab`](https://github.com/rive-app/rive-react/commit/d7f7eab65577732fa1e9f792bc14f10d89c0ccaf)
-- chore: bump to 0.0.13 [`29bd502`](https://github.com/rive-app/rive-react/commit/29bd502208efa6928ffb47f06b5e548f071a8ade)
-
-#### [v0.0.11](https://github.com/rive-app/rive-react/compare/v0.0.10...v0.0.11)
-
-> 14 July 2021
-
-- Update README with camelCase params [`#26`](https://github.com/rive-app/rive-react/pull/26)
-- Update README with camel case params [`14b7746`](https://github.com/rive-app/rive-react/commit/14b774676b41fa3082cb6554ee2062aa7d773da9)
-- chore: release 0.0.11 [`9db4ee5`](https://github.com/rive-app/rive-react/commit/9db4ee52bf919add026c4c5487a5ca399cc0b823)
-
-#### [v0.0.10](https://github.com/rive-app/rive-react/compare/v0.0.9...v0.0.10)
-
-> 28 June 2021
-
-- Include types in npm publish [`#23`](https://github.com/rive-app/rive-react/pull/23)
-- chore: release 0.0.10 [`0b14c4c`](https://github.com/rive-app/rive-react/commit/0b14c4cd4cc49f6b7b1567b23752688092ca73b4)
+- chore: bump to 0.0.12 [`7266fc5`](https://github.com/rive-app/rive-react/commit/7266fc5d2fc0404362031ea3d3c760309f6927e6)
 
 #### [v0.0.9](https://github.com/rive-app/rive-react/compare/v0.0.8...v0.0.9)
 

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 .riv 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 .rive file.
 - `opts`: Rive React specific options.
 
 #### Return Values
@@ -115,30 +115,20 @@ 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: STATE_MACHINE_NAME,
+    stateMachines: 'button',
     autoplay: true,
   });
 
-  const onClickInput = useStateMachineInput(
-    rive,
-    STATE_MACHINE_NAME,
-    INPUT_NAME
-  );
+  const onClickInput = useStateMachineInput(rive, 'button', 'onClick');
 
-  // This example is using a state machine with a trigger input.
-  return <RiveComponent onClick={() => onClickInput.fire()} />;
+  return <RiveComponent onClick={() => onClickInput && 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.
@@ -151,4 +141,4 @@ A Rive.js `stateMachineInput` object.
 
 ## Examples
 
-The [examples](examples) shows a number of different ways to use Rive React. See the instructions for each example to run locally.
+The `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": "latest",
+    "rive-react": "0.0.1",
     "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": "latest",
+    "rive-react": "0.0.1",
     "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

@@ -6,10 +6,10 @@
     "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
-    "react": "file:../../node_modules/react",
+    "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "rive-react": "file:../..",
+    "rive-react": "0.0.1",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

examples/basic/src/App.js

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

examples/basic/src/FlowerExample.js

@@ -1,48 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useRive } from 'rive-react';
-
-function FlowerExample() {
-  const { rive, canvas, RiveComponent } = useRive({
-    src: 'flower.riv',
-    artboard: 'Motion',
-    animations: 'Animation 1',
-    autoplay: true,
-  });
-
-  useEffect(() => {
-    console.log('change');
-    if (canvas) {
-      canvas.width = 200;
-      canvas.height = 200;
-    }
-  }, [canvas]);
-
-  function onLargerClick() {
-    if (rive && canvas) {
-      canvas.width = canvas.width + 50;
-      canvas.height = canvas.height + 50;
-      rive.resizeToCanvas();
-    }
-  }
-
-  function onSmallerClick() {
-    if (rive && canvas && canvas.width > 0) {
-      canvas.width = canvas.width - 50;
-      canvas.height = canvas.height - 50;
-      rive.resizeToCanvas();
-    }
-  }
-
-  return (
-    // The animation will fit to the parent element.
-    <>
-      <button onClick={onLargerClick}>Larger</button>
-      <button onClick={onSmallerClick}>Smaller</button>
-      <div>
-        <RiveComponent />
-      </div>
-    </>
-  );
-}
-
-export default FlowerExample;

examples/basic/src/SizeExample.js

@@ -1,48 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useRive } from 'rive-react';
-
-function SizeExample() {
-  const { rive, canvas, RiveComponent } = useRive({
-    src: 'poison-loader.riv',
-    // artboard: 'Motion',
-    // animations: 'Animation 1',
-    autoplay: true,
-  });
-
-  useEffect(() => {
-    console.log('change');
-    if (canvas) {
-      canvas.width = 200;
-      canvas.height = 200;
-    }
-  }, [canvas]);
-
-  function onLargerClick() {
-    if (rive && canvas) {
-      canvas.width = canvas.width + 50;
-      canvas.height = canvas.height + 50;
-      rive.resizeToCanvas();
-    }
-  }
-
-  function onSmallerClick() {
-    if (rive && canvas && canvas.width > 0) {
-      canvas.width = canvas.width - 50;
-      canvas.height = canvas.height - 50;
-      rive.resizeToCanvas();
-    }
-  }
-
-  return (
-    // The animation will fit to the parent element.
-    <>
-      <button onClick={onLargerClick}>Larger</button>
-      <button onClick={onSmallerClick}>Smaller</button>
-      <div>
-        <RiveComponent />
-      </div>
-    </>
-  );
-}
-
-export default SizeExample;

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": "latest",
+    "rive-react": "0.0.1",
     "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": "latest",
+    "rive-react": "0.0.1",
     "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 - Play/Pause Button</title>
+    <title>Rive React - Basic with Hook</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/package.json

@@ -1,36 +0,0 @@
-{
-  "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

@@ -1,17 +0,0 @@
-<!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

@@ -1,58 +0,0 @@
-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

@@ -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-button/README.md

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

examples/state-machine-button/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "state-machine-number-input",
+  "name": "state-machine-button",
   "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": "latest",
+    "rive-react": "0.0.1",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

examples/state-machine-button/public/index.html

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

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

@@ -0,0 +1,54 @@
+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

@@ -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-number-input/README.md

@@ -1,14 +0,0 @@
-# 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/src/App.js

@@ -1,34 +0,0 @@
-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

@@ -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-trigger-input/README.md

@@ -1,14 +0,0 @@
-# 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

@@ -1,36 +0,0 @@
-{
-  "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

@@ -1,17 +0,0 @@
-<!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

@@ -1,31 +0,0 @@
-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

@@ -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')
-);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "0.0.26",
+  "version": "0.0.13",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -10,7 +10,6 @@
   "scripts": {
     "test": "jest",
     "build": "bunchee src/index.ts -m --no-sourcemap",
-    "dev": "watch 'npm run build' src",
     "lint": "eslint -c .eslintrc.js 'src/**/*{.ts,.tsx}'",
     "format": "prettier --write src",
     "types:check": "tsc --noEmit",
@@ -27,7 +26,7 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive/webgl_single": "file:../rive-wasm/js/npm/webgl_single"
+    "rive-js": "0.7.19"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"
@@ -42,7 +41,7 @@
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "@typescript-eslint/parser": "^4.26.0",
     "auto-changelog": "^2.3.0",
-    "bunchee": "^1.7.3",
+    "bunchee": "^1.6.0",
     "eslint": "^7.28.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-standard": "^16.0.3",
@@ -56,7 +55,6 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "release-it": "^14.10.0",
-    "ts-jest": "^27.0.2",
-    "watch": "^1.0.2"
+    "ts-jest": "^27.0.2"
   }
 }

src/components/Rive.tsx

@@ -1,4 +1,4 @@
-import { Layout } from '@rive/webgl_single';
+import { Layout } from 'rive-js';
 import React, { ComponentProps } from 'react';
 import useRive from '../hooks/useRive';
 

src/hooks/useRive.tsx

@@ -6,7 +6,7 @@ import React, {
   ComponentProps,
   RefCallback,
 } from 'react';
-import { Rive, EventType } from '@rive/webgl_single';
+import { Rive, EventType } from 'rive-js';
 import {
   UseRiveParameters,
   UseRiveOptions,
@@ -36,7 +36,7 @@ function RiveComponent({
       style={'className' in rest ? undefined : containerStyle}
       {...rest}
     >
-      <canvas ref={setCanvasRef} style={{ verticalAlign: 'top' }} />
+      <canvas ref={setCanvasRef} />
     </div>
   );
 }
@@ -125,12 +125,11 @@ export default function useRive(
         containerRef.current.style.height = height + 'px';
       }
       if (options.useDevicePixelRatio) {
-        console.log('updating canvas width, height');
-        // const dpr = window.devicePixelRatio || 1;
-        // canvasRef.current.width = dpr * width;
-        // canvasRef.current.height = dpr * height;
-        // canvasRef.current.style.width = width + 'px';
-        // canvasRef.current.style.height = height + 'px';
+        const dpr = window.devicePixelRatio || 1;
+        canvasRef.current.width = dpr * width;
+        canvasRef.current.height = dpr * height;
+        canvasRef.current.style.width = width + 'px';
+        canvasRef.current.style.height = height + 'px';
       } else {
         canvasRef.current.width = width;
         canvasRef.current.height = height;

src/hooks/useStateMachineInput.ts

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Rive, StateMachineInput } from '@rive/webgl_single';
+import { Rive, StateMachineInput } from 'rive-js';
 
 /**
  * Custom hook for fetching a stateMachine input from a rive file.

src/index.ts

@@ -5,4 +5,4 @@ import useStateMachineInput from './hooks/useStateMachineInput';
 export default Rive;
 export { useRive, useStateMachineInput };
 export { RiveState, UseRiveParameters, UseRiveOptions } from './types';
-export * from '@rive/webgl_single';
+export * from 'rive-js';

src/types.ts

@@ -1,5 +1,5 @@
 import { RefCallback, ComponentProps } from 'react';
-import { Rive, RiveParameters } from '@rive/webgl_single';
+import { Rive, RiveParameters } from 'rive-js';
 
 export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
 

tsconfig.json

@@ -6,7 +6,6 @@
     "lib": ["esnext", "dom"],
     "module": "commonjs",
     "moduleResolution": "node",
-    "noImplicitAny": false,
     "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,