some improvements

CHANGELOG.md

@@ -4,35 +4,6 @@ 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.14](https://github.com/rive-app/rive-react/compare/v0.0.9...v0.0.14)
+#### 0.0.20
 
-- chore: bump to 0.0.13 [`29bd502`](https://github.com/rive-app/rive-react/commit/29bd502208efa6928ffb47f06b5e548f071a8ade)
-
-#### [v0.0.9](https://github.com/rive-app/rive-react/compare/v0.0.8...v0.0.9)
-
-> 28 June 2021
-
-- Fix build automation and only include dist files [`#22`](https://github.com/rive-app/rive-react/pull/22)
-- chore: release 0.0.9 [`2ec726c`](https://github.com/rive-app/rive-react/commit/2ec726cf12361254403539b30ebafb9adef9254d)
-
-#### v0.0.8
-
-> 28 June 2021
-
-- Add release it dependency [`#21`](https://github.com/rive-app/rive-react/pull/21)
-- add release it for automated github releases and npm publish [`#20`](https://github.com/rive-app/rive-react/pull/20)
-- Add token to publish step [`#17`](https://github.com/rive-app/rive-react/pull/17)
-- Publish on merge to master [`#16`](https://github.com/rive-app/rive-react/pull/16)
-- version bump [`#15`](https://github.com/rive-app/rive-react/pull/15)
-- Bump rive-js version to 0.7.15 [`#14`](https://github.com/rive-app/rive-react/pull/14)
-- lower react peer dependency version [`#13`](https://github.com/rive-app/rive-react/pull/13)
-- Bump version to 0.0.5 [`#12`](https://github.com/rive-app/rive-react/pull/12)
-- Add Readme and change Rive Component [`#11`](https://github.com/rive-app/rive-react/pull/11)
-- Export rive-js types [`#10`](https://github.com/rive-app/rive-react/pull/10)
-- Add eslint and prettier configs [`#9`](https://github.com/rive-app/rive-react/pull/9)
-- Add basic github action for running tests [`#8`](https://github.com/rive-app/rive-react/pull/8)
-- Add typescript example [`#7`](https://github.com/rive-app/rive-react/pull/7)
-- Add examples for using rive-react [`#1`](https://github.com/rive-app/rive-react/pull/1)
-- Initial commit of existing implementation [`3b1d759`](https://github.com/rive-app/rive-react/commit/3b1d7593fe95da652857f7d362f90d8facad05ee)
-- Add changelog managed by auto-changelog [`5916f38`](https://github.com/rive-app/rive-react/commit/5916f384bbcb8af250a5ae3fb6f4061a742551a0)
-- Update README.md with usage docs [`c0a6b83`](https://github.com/rive-app/rive-react/commit/c0a6b835eacc2939f82923fb0c6c2d3b3cc12ed2)
+- 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)

README.md

@@ -121,15 +121,19 @@ function Example() {
     autoplay: true,
   });
 
-  const onClickInput = useStateMachineInput(rive, 'button', 'onClick');
+  const onClickInput = useStateMachineInput({
+    rive: rive,
+    stateMachineName: 'button',
+    inputName: 'onClick',
+  });
 
-  return <RiveComponent onClick={() => onClickInput && onClickInput.fire())} />;
+  return <RiveComponent onClick={() => onClickInput && onClickInput.fire()} />;
 }
 
 export default Example;
 ```
 
-#### Parameters
+#### params
 
 - `rive`: A `Rive` object. This is returned by the `useRive` hook.
 - `stateMachineName`: Name of the state machine.

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": "file:../..",
     "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>
   );

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "0.0.14",
+  "version": "0.0.20",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -6913,9 +6913,9 @@
       }
     },
     "rive-js": {
-      "version": "0.7.19",
-      "resolved": "https://registry.npmjs.org/rive-js/-/rive-js-0.7.19.tgz",
-      "integrity": "sha512-03YqqOQVJqF3JnVKk8OPXCTDvNgGVmQyvtSQac/TI/VYO13XFwl0doCIsOZpfrTRl3g+QdPKiR0/nsaR59aQ5Q=="
+      "version": "0.7.30",
+      "resolved": "https://registry.npmjs.org/rive-js/-/rive-js-0.7.30.tgz",
+      "integrity": "sha512-9UqrpwqoaXCwEeLblfsnEZocf+s/OswJm10pjYI50uxYmFgKpbuyllIjW0XkQxJuWETXkhhUW+ESdhJ5lc1POA=="
     },
     "rollup": {
       "version": "1.32.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "0.0.14",
+  "version": "0.0.20",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -26,7 +26,7 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "rive-js": "0.7.19"
+    "rive-js": "0.7.30"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"

src/hooks/useRive.tsx

@@ -6,7 +6,7 @@ import React, {
   ComponentProps,
   RefCallback,
 } from 'react';
-import { Rive, EventType } from 'rive-js';
+import { Rive, EventType, StateMachineInputType } from 'rive-js';
 import {
   UseRiveParameters,
   UseRiveOptions,
@@ -228,7 +228,34 @@ export default function useRive(
     );
   }, []);
 
+  const debug = useCallback(() => {
+    if (!rive) {
+      console.log({
+        loaded: false,
+      });
+      return;
+    }
+
+    const stateMachines = rive.stateMachineNames.map((stateMachineName) => ({
+      stateMachineName,
+      stateMachineInputs: (rive.stateMachineInputs(stateMachineName) ?? []).map(
+        (stateMachineInput) => ({
+          name: stateMachineInput.name,
+          value: stateMachineInput.value,
+          type: StateMachineInputType[stateMachineInput.type],
+        })
+      ),
+    }));
+
+    console.log({
+      activeArtboard: rive.activeArtboard,
+      animationsNames: rive.animationNames,
+      stateMachines,
+    });
+  }, [rive]);
+
   return {
+    debug,
     canvas: canvasRef.current,
     setCanvasRef,
     setContainerRef,

src/hooks/useStateMachineInput.ts

@@ -1,28 +1,29 @@
 import { useState, useEffect } from 'react';
 import { Rive, StateMachineInput } from 'rive-js';
+import { UseStateMachineInputParameters } from '../types';
 
 /**
  * Custom hook for fetching a stateMachine input from a rive file.
  *
- * @param rive - Rive instance
- * @param stateMachineName - Name of the state machine
- * @param inputName - Name of the input
+ * @param params.rive - Rive Instance
+ * @param params.stateMachineName - Name of the state machine
+ * @param params.inputName - Name of the state machine input
  * @returns
  */
 export default function useStateMachineInput(
-  rive: Rive | null,
-  stateMachineName?: string,
-  inputName?: string
+  params: UseStateMachineInputParameters
 ) {
   const [input, setInput] = useState<StateMachineInput | null>(null);
 
+  const { rive, stateMachineName, inputName } = params;
+
   useEffect(() => {
     if (!rive || !stateMachineName || !inputName) {
       setInput(null);
     }
 
     if (rive && stateMachineName && inputName) {
-      const inputs = rive.stateMachineInputs(stateMachineName);
+      const inputs = (rive as Rive).stateMachineInputs(stateMachineName);
       if (inputs) {
         const selectedInput = inputs.find((input) => input.name === inputName);
         setInput(selectedInput || null);

src/types.ts

@@ -1,6 +1,18 @@
 import { RefCallback, ComponentProps } from 'react';
 import { Rive, RiveParameters } from 'rive-js';
 
+/**
+ * @typedef UseStateMachineInputParameters
+ * @property rive - Rive Instance
+ * @property stateMachineName - Name of the state machine
+ * @property inputName - Name of the input
+ */
+export type UseStateMachineInputParameters = {
+  rive: Rive | null;
+  stateMachineName?: string;
+  inputName?: string;
+};
+
 export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;
 
 export type UseRiveOptions = {
@@ -24,6 +36,7 @@ export type Dimensions = {
  * @property rive - The loaded Rive Animation
  */
 export type RiveState = {
+  debug: () => void;
   canvas: HTMLCanvasElement | null;
   setCanvasRef: RefCallback<HTMLCanvasElement>;
   setContainerRef: RefCallback<HTMLElement>;