some improvements

Update README with camelCase params

.github/workflows/publish.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Run Tests
         run: npm test
       - name: Build
-        run: npm build
+        run: npm run build
       - name: Git config
         run: |
           git config --local user.email 'hello@rive.app'

.release-it.json

@@ -9,7 +9,7 @@
   },
   "github": {
     "release": true,
-    "releaseName": "Release ${version}"
+    "releaseName": "${version}"
   },
   "hooks": {
     "after:bump": "npx auto-changelog -p"

CHANGELOG.md

@@ -4,6 +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).
 
-#### 0.0.8
+#### 0.0.20
 
-- Add release it dependency [`#21`](https://github.com/rive-app/rive-react/pull/21)
+- 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

@@ -94,13 +94,13 @@ export default Example;
 - `stateMachines?`: _(optional)_ Name of list of names of state machines to load.
 - `layout?`: _(optional)_ Layout object to define how animations are displayed on the canvas. See [Rive.js](https://github.com/rive-app/rive-wasm#layout) for more details.
 - `autoplay?`: _(optional)_ If `true`, the animation will automatically start playing when loaded. Defaults to false.
-- `onload?`: _(optional)_ Callback that get's fired when the .rive file loads .
-- `onloaderror?`: _(optional)_ Callback that get's fired when an error occurs loading the .riv file.
-- `onplay?`: _(optional)_ Callback that get's fired when the animation starts playing.
-- `onpause?`: _(optional)_ Callback that get's fired when the animation pauses.
-- `onstop?`: _(optional)_ Callback that get's fired when the animation stops playing.
-- `onloop?`: _(optional)_ Callback that get's fired when the animation completes a loop.
-- `onstatechange?`: _(optional)_ Callback that get's fired when a state change occurs.
+- `onLoad?`: _(optional)_ Callback that get's fired when the .rive file loads .
+- `onLoadError?`: _(optional)_ Callback that get's fired when an error occurs loading the .riv file.
+- `onPlay?`: _(optional)_ Callback that get's fired when the animation starts playing.
+- `onPause?`: _(optional)_ Callback that get's fired when the animation pauses.
+- `onStop?`: _(optional)_ Callback that get's fired when the animation stops playing.
+- `onLoop?`: _(optional)_ Callback that get's fired when the animation completes a loop.
+- `onStateChange?`: _(optional)_ Callback that get's fired when a state change occurs.
 
 #### opts
 
@@ -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.8",
+  "version": "0.0.20",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -6912,18 +6912,10 @@
         "glob": "^7.1.3"
       }
     },
-    "rive-canvas": {
-      "version": "0.7.6",
-      "resolved": "https://registry.npmjs.org/rive-canvas/-/rive-canvas-0.7.6.tgz",
-      "integrity": "sha512-RoZocagAmHs3lhD8nYrpxMtNObMREqdL4kSk63dkQOrKRdtby/N8S9bWFXxPo1kMCZBQz50JiTy4+Ink7QpRLA=="
-    },
     "rive-js": {
-      "version": "0.7.15",
-      "resolved": "https://registry.npmjs.org/rive-js/-/rive-js-0.7.15.tgz",
-      "integrity": "sha512-LM2/JCdwHu33SmAtPpKq3M6AiO7v5iK6h9TQTeT2Hpk1MB4JfWz1jceXhSSJwZ6Vj9zbDeuFJamOdHx5PpVQpA==",
-      "requires": {
-        "rive-canvas": "0.7.6"
-      }
+      "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,9 +1,12 @@
 {
   "name": "rive-react",
-  "version": "0.0.8",
+  "version": "0.0.20",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
   "scripts": {
     "test": "jest",
     "build": "bunchee src/index.ts -m --no-sourcemap",
@@ -23,7 +26,7 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "rive-js": "0.7.15"
+    "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>;