hook with generic

CHANGELOG.md

@@ -4,8 +4,201 @@ 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).
 
+#### [v4.18.2](https://github.com/rive-app/rive-react/compare/v4.18.1...v4.18.2)
+
+- chore: update rive to 2.26.3 [`19b58f5`](https://github.com/rive-app/rive-react/commit/19b58f5eb6d215a92019b69d1c1a182e1b582af0)
+
+#### [v4.18.1](https://github.com/rive-app/rive-react/compare/v4.18.0...v4.18.1)
+
+> 15 February 2025
+
+- chore: release 4.18.1 [`6263449`](https://github.com/rive-app/rive-react/commit/6263449898abdb77f4a08e92f186e61f9ec4cea8)
+- update rive to 2.26.2 [`630f70a`](https://github.com/rive-app/rive-react/commit/630f70a81dbf5292fc339163f3367b53adfb5e65)
+
+#### [v4.18.0](https://github.com/rive-app/rive-react/compare/v4.17.10...v4.18.0)
+
+> 11 February 2025
+
+- chore: release 4.18.0 [`bbd0d08`](https://github.com/rive-app/rive-react/commit/bbd0d08fed0c3f3e5efd04f178e7a380951616ab)
+- cleanup instance if use effect reruns and instance is not loaded [`ca10584`](https://github.com/rive-app/rive-react/commit/ca10584ed422be62e9eea2b7d05007cd2abd3870)
+- update rive to 2.26.1 [`ef23793`](https://github.com/rive-app/rive-react/commit/ef23793d2629dee2eb448d0c825a3e7cdfb675d9)
+
+#### [v4.17.10](https://github.com/rive-app/rive-react/compare/v4.17.9...v4.17.10)
+
+> 27 January 2025
+
+- chore: release 4.17.10 [`6fe765d`](https://github.com/rive-app/rive-react/commit/6fe765df84e996611b8878155ba0078ee9caff78)
+- chore: add React 19 support to package.json [`c62b80a`](https://github.com/rive-app/rive-react/commit/c62b80af09a3b42407dac8d9c63cd0e070738d82)
+
+#### [v4.17.9](https://github.com/rive-app/rive-react/compare/v4.17.8...v4.17.9)
+
+> 27 January 2025
+
+- chore: release 4.17.9 [`777337c`](https://github.com/rive-app/rive-react/commit/777337c4814ecc16f09a7971f3fabccc4be48b33)
+- update rive to 2.25.7 [`da4b597`](https://github.com/rive-app/rive-react/commit/da4b5978e7a558bba0d10ca18ef3053deac88691)
+
+#### [v4.17.8](https://github.com/rive-app/rive-react/compare/v4.17.7...v4.17.8)
+
+> 24 January 2025
+
+- chore: release 4.17.8 [`09c0d1f`](https://github.com/rive-app/rive-react/commit/09c0d1f94723f09faf06d0e17c19f322f0e2a1c2)
+- update rive to 2.25.6 [`0ca5933`](https://github.com/rive-app/rive-react/commit/0ca5933c411b1a733b35dd785a7bfcdba569b8c5)
+
+#### [v4.17.7](https://github.com/rive-app/rive-react/compare/v4.17.6...v4.17.7)
+
+> 23 January 2025
+
+- chore: release 4.17.7 [`f272fd9`](https://github.com/rive-app/rive-react/commit/f272fd92f0030016b691923f8c61d1ae56182e82)
+- chore: bump wasm to 2.25.5 [`192a562`](https://github.com/rive-app/rive-react/commit/192a562764d1cb906d14e2f8f3d6fed3cfa5f039)
+
+#### [v4.17.6](https://github.com/rive-app/rive-react/compare/v4.17.5...v4.17.6)
+
+> 14 January 2025
+
+- chore: release 4.17.6 [`224a768`](https://github.com/rive-app/rive-react/commit/224a7687373bfc8ef05bfb4604f5b1e2be9e4cdd)
+- update rive to 2.25.4 [`c085bd5`](https://github.com/rive-app/rive-react/commit/c085bd5ea3c811a5934c725d3347baf723b11225)
+
+#### [v4.17.5](https://github.com/rive-app/rive-react/compare/v4.17.4...v4.17.5)
+
+> 24 December 2024
+
+- chore: release 4.17.5 [`bb13c71`](https://github.com/rive-app/rive-react/commit/bb13c719828b2c5c27b524f0e79b5f7ad3896618)
+- bump rive canvas to 2.25.3 [`779e065`](https://github.com/rive-app/rive-react/commit/779e06583ceb853621693d0e0c056537c90998b9)
+
+#### [v4.17.4](https://github.com/rive-app/rive-react/compare/v4.17.3...v4.17.4)
+
+> 17 December 2024
+
+- chore: release 4.17.4 [`e172e0f`](https://github.com/rive-app/rive-react/commit/e172e0f21092a3c4dd9cf528aa71684dc07b3fa7)
+- rive canvas 2.25.2 [`abbcf14`](https://github.com/rive-app/rive-react/commit/abbcf14b706fedb8aed1c291b0d35b225206eed8)
+
+#### [v4.17.3](https://github.com/rive-app/rive-react/compare/v4.17.2...v4.17.3)
+
+> 13 December 2024
+
+- chore: release 4.17.3 [`a088564`](https://github.com/rive-app/rive-react/commit/a0885648ceb4d833c1467fd10d36641fc5f79450)
+- rive canvas 2.25.1 [`9f768bd`](https://github.com/rive-app/rive-react/commit/9f768bdd0ca07aedec7f67405223b44bcf7380d7)
+
+#### [v4.17.2](https://github.com/rive-app/rive-react/compare/v4.17.1...v4.17.2)
+
+> 11 December 2024
+
+- chore: release 4.17.2 [`94c9a2a`](https://github.com/rive-app/rive-react/commit/94c9a2a60b89244e0a36eb9324e500616a31e970)
+- rive canvas 2.25.0 [`dfe0d10`](https://github.com/rive-app/rive-react/commit/dfe0d109368abe8ebadf8dabc80d05116242c301)
+
+#### [v4.17.1](https://github.com/rive-app/rive-react/compare/v4.17.0...v4.17.1)
+
+> 11 December 2024
+
+- chore: release 4.17.1 [`d27eb72`](https://github.com/rive-app/rive-react/commit/d27eb7254dfa2c2338f02264c7d1a65c8bf1f366)
+- rive canvas 2.24.1 [`c0b27bd`](https://github.com/rive-app/rive-react/commit/c0b27bd018f0bdb6f0e1679816c96c5ba6d6c5bd)
+
+#### [v4.17.0](https://github.com/rive-app/rive-react/compare/v4.16.7...v4.17.0)
+
+> 10 December 2024
+
+- chore: release 4.17.0 [`739ac7c`](https://github.com/rive-app/rive-react/commit/739ac7c3708b7aa28d0bae01fc13ce99d7fc27ed)
+- bump rive canvas to 2.24.0 [`b1b8040`](https://github.com/rive-app/rive-react/commit/b1b8040b4f92375be734070502e73e6609e82448)
+
+#### [v4.16.7](https://github.com/rive-app/rive-react/compare/v4.16.6...v4.16.7)
+
+> 27 November 2024
+
+- chore: release 4.16.7 [`1f6ae83`](https://github.com/rive-app/rive-react/commit/1f6ae83de319a244cb3fb84766cbcc10e2d7197b)
+- bump rive canvas to 2.23.11 [`e5ff233`](https://github.com/rive-app/rive-react/commit/e5ff233c34241d19f16cd1b5bb1ceaba1d36a43e)
+
+#### [v4.16.6](https://github.com/rive-app/rive-react/compare/v4.16.5...v4.16.6)
+
+> 22 November 2024
+
+- chore: release 4.16.6 [`6479556`](https://github.com/rive-app/rive-react/commit/64795564d806df0f3bb8c8dfe865a5f7a41dfd2a)
+- Bump rive canvas to 2.23.10 [`f0b3205`](https://github.com/rive-app/rive-react/commit/f0b32056a4488aef59f9f6b17522c61ac7f483f6)
+
+#### [v4.16.5](https://github.com/rive-app/rive-react/compare/v4.16.4...v4.16.5)
+
+> 21 November 2024
+
+- chore: release 4.16.5 [`b5dc2fa`](https://github.com/rive-app/rive-react/commit/b5dc2fa8dad4858322e1b0d626c6dd9ae949e2f9)
+- update rive canvas version [`0108d42`](https://github.com/rive-app/rive-react/commit/0108d425dd35603db9da1f1d99d0c00a5dcb86b0)
+
+#### [v4.16.4](https://github.com/rive-app/rive-react/compare/v4.16.3...v4.16.4)
+
+> 15 November 2024
+
+- chore: release 4.16.4 [`74a2714`](https://github.com/rive-app/rive-react/commit/74a27143b41773436c3e7125e8047572b5cde009)
+- bump rive canvas to 2.23.8 [`2cfb8a4`](https://github.com/rive-app/rive-react/commit/2cfb8a4955b2bc18e1895680cfcd2b305005cce1)
+
+#### [v4.16.3](https://github.com/rive-app/rive-react/compare/v4.16.2...v4.16.3)
+
+> 14 November 2024
+
+- chore: release 4.16.3 [`af6c3f8`](https://github.com/rive-app/rive-react/commit/af6c3f84c6dd4dc21731ca8457efe33a6ae1578c)
+- bump rive canvas to 2.23.7 [`351d996`](https://github.com/rive-app/rive-react/commit/351d9966b17180a1402d29ca71a1f5aef1d804ac)
+- update react to 2.23.6 [`ba73cb7`](https://github.com/rive-app/rive-react/commit/ba73cb7053a3ac729e24dc05d6e0ae272f84f12f)
+
+#### [v4.16.2](https://github.com/rive-app/rive-react/compare/v4.16.1...v4.16.2)
+
+> 12 November 2024
+
+- chore: release 4.16.2 [`4a4f8a7`](https://github.com/rive-app/rive-react/commit/4a4f8a7151dd37a0925d72897716939e75f95395)
+- updated rive canvas [`b5baef5`](https://github.com/rive-app/rive-react/commit/b5baef5ce72741df8dd970e64ae22e3f8b8da795)
+
+#### [v4.16.1](https://github.com/rive-app/rive-react/compare/v4.16.0...v4.16.1)
+
+> 5 November 2024
+
+- chore: release 4.16.1 [`79f80d3`](https://github.com/rive-app/rive-react/commit/79f80d39cd2d8f5d2fad691b765f5e27a31db9ba)
+- bump to canvas 2.23.4 [`e1ed825`](https://github.com/rive-app/rive-react/commit/e1ed8250e351f6efa19589111310021e09f7e70c)
+
+#### [v4.16.0](https://github.com/rive-app/rive-react/compare/v4.15.2...v4.16.0)
+
+> 1 November 2024
+
+- chore: release 4.16.0 [`a40ba0d`](https://github.com/rive-app/rive-react/commit/a40ba0dacc9ac0535abaa4448f904a44067a3b10)
+- chore: bump js and use public setters [`99489af`](https://github.com/rive-app/rive-react/commit/99489af287e85122c9cbe75dc6b97b393254484e)
+- chore: bump again to make type check happy [`7ea9c8f`](https://github.com/rive-app/rive-react/commit/7ea9c8fbcbaeb3910ddcc88766e7a5a1061fa89d)
+
+#### [v4.15.2](https://github.com/rive-app/rive-react/compare/v4.15.1...v4.15.2)
+
+> 30 October 2024
+
+- chore: release 4.15.2 [`2e461c6`](https://github.com/rive-app/rive-react/commit/2e461c66b37d29b05ce3a0d02547db933b7dd33f)
+- fix: account for scale factor in layout resizing [`bb07829`](https://github.com/rive-app/rive-react/commit/bb078296d0d694e5b6db0271bac52b207c5094ec)
+
+#### [v4.15.1](https://github.com/rive-app/rive-react/compare/v4.15.0...v4.15.1)
+
+> 30 October 2024
+
+- chore: release 4.15.1 [`f9bad8b`](https://github.com/rive-app/rive-react/commit/f9bad8b62d3919fdbcfd6d5f62e77d8b920d5e8e)
+- fix: additional layout configuration that react needs [`83fa663`](https://github.com/rive-app/rive-react/commit/83fa6635ec5fc51e4651f0705fdb392f84d6421d)
+- fix: only perform layout resizing if the Layout object exists [`e42f5e3`](https://github.com/rive-app/rive-react/commit/e42f5e32d7968f26008d61248b74bb6c16d74647)
+
+#### [v4.15.0](https://github.com/rive-app/rive-react/compare/v4.14.6...v4.15.0)
+
+> 30 October 2024
+
+- chore: release 4.15.0 [`bdd4c84`](https://github.com/rive-app/rive-react/commit/bdd4c84d8b32fafb775afcaded6c16ec158892bb)
+- feat: responsive layouts! [`414543d`](https://github.com/rive-app/rive-react/commit/414543d37dde248a7028d9d6a43c3c7dee3d49f6)
+
+#### [v4.14.6](https://github.com/rive-app/rive-react/compare/v4.14.5...v4.14.6)
+
+> 29 October 2024
+
+- chore: release 4.14.6 [`119f7ee`](https://github.com/rive-app/rive-react/commit/119f7eea2a7b29e79dd837c36e5c0fb37232d554)
+- rive canvas 2.21.7 [`92b0342`](https://github.com/rive-app/rive-react/commit/92b0342882ff44eb55526a43804cae2499a4bea2)
+
+#### [v4.14.5](https://github.com/rive-app/rive-react/compare/v4.14.4...v4.14.5)
+
+> 15 October 2024
+
+- chore: release 4.14.5 [`38b0a1c`](https://github.com/rive-app/rive-react/commit/38b0a1cc8638c0e1406c5cc7e3305875cb1f3c3a)
+- rive canvas 2.21.6 [`2fd87e4`](https://github.com/rive-app/rive-react/commit/2fd87e45e82a14da9576041fcdf3105187b81953)
+
 #### [v4.14.4](https://github.com/rive-app/rive-react/compare/v4.14.3...v4.14.4)
 
+> 2 October 2024
+
+- chore: release 4.14.4 [`dc99fe2`](https://github.com/rive-app/rive-react/commit/dc99fe27ccdb5697db4374c7f7617bacb17e957d)
 - update rive to 2.21.5 [`2358c82`](https://github.com/rive-app/rive-react/commit/2358c826267c16e7f6d518b4c439c951c9c4ebc9)
 
 #### [v4.14.3](https://github.com/rive-app/rive-react/compare/v4.14.2...v4.14.3)

npm/react-canvas-lite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-canvas-lite",
-  "version": "4.14.4",
+  "version": "4.18.2",
   "description": "React wrapper around the @rive-app/canvas-lite library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -18,9 +18,9 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas-lite": "2.21.5"
+    "@rive-app/canvas-lite": "2.26.3"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"
   }
 }

npm/react-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-canvas",
-  "version": "4.14.4",
+  "version": "4.18.2",
   "description": "React wrapper around the @rive-app/canvas library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -18,9 +18,9 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas": "2.21.5"
+    "@rive-app/canvas": "2.26.3"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"
   }
 }

npm/react-webgl/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-webgl",
-  "version": "4.14.4",
+  "version": "4.18.2",
   "description": "React wrapper around the @rive-app/webgl library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -18,9 +18,9 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/webgl": "2.21.5"
+    "@rive-app/webgl": "2.26.3"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"
   }
 }

npm/react-webgl2/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rive-app/react-webgl2",
-  "version": "4.14.4",
+  "version": "4.18.2",
   "description": "React wrapper around the @rive-app/webgl2 library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -18,9 +18,9 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/webgl2": "2.21.5"
+    "@rive-app/webgl2": "2.26.3"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rive-react",
-  "version": "4.14.4",
+  "version": "4.18.2",
   "description": "React wrapper around the rive-js library",
   "main": "dist/index.js",
   "typings": "dist/types/index.d.ts",
@@ -36,13 +36,13 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/canvas": "2.21.5",
-    "@rive-app/canvas-lite": "2.21.5",
-    "@rive-app/webgl": "2.21.5",
-    "@rive-app/webgl2": "2.21.5"
+    "@rive-app/canvas": "2.26.3",
+    "@rive-app/canvas-lite": "2.26.3",
+    "@rive-app/webgl": "2.26.3",
+    "@rive-app/webgl2": "2.26.3"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.0",

src/hooks/useRive.tsx

@@ -6,9 +6,10 @@ import React, {
   ComponentProps,
   RefCallback,
 } from 'react';
-import { Rive, EventType } from '@rive-app/canvas';
+import { Rive, EventType, Fit } from '@rive-app/canvas';
 import { UseRiveParameters, UseRiveOptions, RiveState } from '../types';
 import useResizeCanvas from './useResizeCanvas';
+import useDevicePixelRatio from './useDevicePixelRatio';
 import { getOptions } from '../utils';
 import useIntersectionObserver from './useIntersectionObserver';
 
@@ -74,16 +75,27 @@ export default function useRive(
   const isParamsLoaded = Boolean(riveParams);
   const options = getOptions(opts);
 
+  const devicePixelRatio = useDevicePixelRatio();
+
   /**
    * When the canvas/parent container resize, reset the Rive layout to match the
    * new (0, 0, canvas.width, canvas.height) bounds in the render loop
    */
   const onCanvasHasResized = useCallback(() => {
     if (rive) {
+      if (rive.layout && rive.layout.fit === Fit.Layout) {
+        if (canvasElem) {
+          const resizeFactor = devicePixelRatio * rive.layout.layoutScaleFactor;
+          rive.devicePixelRatioUsed = devicePixelRatio;
+          rive.artboardWidth = canvasElem?.width / resizeFactor;
+          rive.artboardHeight = canvasElem?.height / resizeFactor;
+        }
+      }
+
       rive.startRendering();
       rive.resizeToCanvas();
     }
-  }, [rive]);
+  }, [rive, devicePixelRatio]);
 
   // Watch the canvas parent container resize and size the canvas to match
   useResizeCanvas({
@@ -114,24 +126,32 @@ export default function useRive(
     if (!canvasElem || !riveParams) {
       return;
     }
+    let isLoaded = rive != null;
+    let r: Rive | null;
     if (rive == null) {
       const { useOffscreenRenderer } = options;
-      const r = new Rive({
+      r = new Rive({
         useOffscreenRenderer,
         ...riveParams,
         canvas: canvasElem,
       });
       r.on(EventType.Load, () => {
+        isLoaded = true;
         // Check if the component/canvas is mounted before setting state to avoid setState
         // on an unmounted component in some rare cases
         if (canvasElem) {
           setRive(r);
         } else {
           // If unmounted, cleanup the rive object immediately
-          r.cleanup();
+          r!.cleanup();
         }
       });
     }
+    return () => {
+      if(!isLoaded) {
+        r?.cleanup();
+      }
+    }
   }, [canvasElem, isParamsLoaded, rive]);
   /**
    * Ref callback called when the container element mounts

src/hooks/useViewModel.ts

@@ -0,0 +1,74 @@
+import { useState, useEffect, useRef } from 'react';
+import { EventType, Rive, ViewModel } from '@rive-app/canvas';
+import { UseViewModelParameters } from '../types';
+
+const defaultParams: UseViewModelParameters = {
+  useDefault: false,
+  name: '',
+};
+
+const equal = (
+  params: UseViewModelParameters | null,
+  to: UseViewModelParameters | null
+): boolean => {
+  if (!params || !to) {
+    return false;
+  }
+  if (params.useDefault !== to.useDefault || params.name !== to.name) {
+    return false;
+  }
+  return true;
+};
+
+/**
+ * Custom hook for fetching a view model.
+ *
+ * @param rive - Rive instance
+ * @param userParameters - Parameters to load view model
+ * @returns
+ */
+export default function useViewModel(
+  rive: Rive | null,
+  userParameters?: UseViewModelParameters
+): ViewModel | null {
+  const [viewModel, setViewModel] = useState<ViewModel | null>(null);
+  const currentParams = useRef<UseViewModelParameters | null>(null);
+
+  useEffect(() => {
+    const parameters = {
+      ...defaultParams,
+      ...userParameters,
+    };
+
+    function getViewModel(): ViewModel | null {
+      if (rive) {
+        if (parameters?.useDefault) {
+          return rive!.defaultViewModel();
+        } else if (parameters?.name) {
+          return rive.viewModelByName(parameters?.name);
+        }
+      }
+      return null;
+    }
+    function setViewModelValue() {
+      if (!rive) {
+        setViewModel(null);
+        currentParams.current = null;
+      } else {
+        const viewModel = getViewModel();
+        setViewModel(viewModel);
+        currentParams.current = parameters;
+      }
+    }
+
+    if (!equal(parameters, currentParams.current)) {
+      rive?.on(EventType.Load, setViewModelValue);
+      setViewModelValue();
+    }
+    return () => {
+      rive?.off(EventType.Load, setViewModelValue);
+    };
+  }, [rive, userParameters]);
+
+  return viewModel;
+}

src/hooks/useViewModelInstance.ts

@@ -0,0 +1,91 @@
+import { useState, useEffect, useRef } from 'react';
+import {
+  EventType,
+  Rive,
+  ViewModel,
+  ViewModelInstance,
+} from '@rive-app/canvas';
+import { UseViewModelInstanceParameters } from '../types';
+
+const defaultParams: UseViewModelInstanceParameters = {
+  useDefault: false,
+  useNew: true,
+  name: '',
+};
+
+const equal = (
+  params: UseViewModelInstanceParameters | null,
+  to: UseViewModelInstanceParameters | null
+): boolean => {
+  if (!params || !to) {
+    return false;
+  }
+  if (
+    params.useDefault !== to.useDefault ||
+    params.useNew !== to.useNew ||
+    params.name !== to.name
+  ) {
+    return false;
+  }
+  return true;
+};
+
+/**
+ * Custom hook for fetching a view model instance.
+ *
+ * @param rive - Rive instance
+ * @param userParameters - Parameters to load view model instance
+ * @returns
+ */
+export default function useViewModel(
+  rive: Rive | null,
+  viewModel: ViewModel | null,
+  userParameters?: UseViewModelInstanceParameters
+) : ViewModelInstance | null {
+  const [viewModelInstance, setViewModelInstance] =
+    useState<ViewModelInstance | null>(null);
+  const currentParams = useRef<UseViewModelInstanceParameters | null>(null);
+
+  useEffect(() => {
+    const parameters = {
+      ...defaultParams,
+      ...userParameters,
+    };
+
+    function setInstance(instance: ViewModelInstance | null) {
+      setViewModelInstance(instance);
+      rive!.bindViewModelInstance(instance);
+      currentParams.current = parameters;
+    }
+    function getViewModelInstance(): ViewModelInstance | null {
+      if (viewModel) {
+        if (parameters.useDefault) {
+          return viewModel?.defaultInstance();
+        } else if (parameters.name) {
+          return viewModel?.instanceByName(parameters.name);
+        } else if (parameters.useNew) {
+          return viewModel?.instance();
+        }
+      }
+      return null;
+    }
+    function setViewModelValue() {
+      if (!rive || !viewModel) {
+        setViewModelInstance(null);
+      } else {
+        const instance = getViewModelInstance();
+        setInstance(instance ?? null);
+      }
+    }
+
+    if (!equal(parameters, currentParams.current)) {
+      rive?.on(EventType.Load, setViewModelValue);
+      setViewModelValue();
+    }
+    return () => {
+      rive?.off(EventType.Load, setViewModelValue);
+    };
+  }, [rive, userParameters]);
+
+  return viewModelInstance;
+}

src/hooks/useViewModelInstanceProperty.ts

@@ -0,0 +1,99 @@
+import { useState, useEffect, useRef } from 'react';
+import {
+  EventType,
+  ViewModelInstance,
+} from '@rive-app/canvas';
+import { UseViewModelInstanceValueParameters } from '../types';
+
+const defaultParams: UseViewModelInstanceValueParameters = {
+  viewModelInstance: null,
+};
+
+const equal = (
+  path: string[],
+  params: UseViewModelInstanceValueParameters | null,
+  to: HookArguments | null
+): boolean => {
+  if (!params || !to) {
+    return false;
+  }
+  if (
+    params.rive !== to.parameters.rive ||
+    params.viewModelInstance !== to.parameters.viewModelInstance ||
+    path.join('') !== to.path.join('')
+  ) {
+    return false;
+  }
+  return true;
+};
+
+type HookArguments = {
+  path: string[],
+  parameters: UseViewModelInstanceValueParameters,
+}
+
+/**
+ * Custom hook for fetching a view model instance value.
+ *
+ * @param name - name of the propery
+ * @param path - Path to reach the required property
+ * @param userParameters - Parameters to load view model instance number
+ * @returns
+ */
+export default function useViewModelInstanceProperty(
+  path: string[] = [],
+  userParameters?: UseViewModelInstanceValueParameters
+): ViewModelInstance | null {
+  const [viewModelInstance, setViewModelValue] =
+    useState<ViewModelInstance | null>(null);
+  const currentArguments = useRef<HookArguments | null>(
+    null
+  );
+
+  useEffect(() => {
+    const parameters = {
+      ...defaultParams,
+      ...userParameters,
+    };
+
+    function getInstanceValue(): ViewModelInstance | null {
+      let viewModelInstance: ViewModelInstance | null = null;
+      if (userParameters?.viewModelInstance) {
+        viewModelInstance = userParameters?.viewModelInstance;
+      } else if (userParameters?.rive) {
+        viewModelInstance = userParameters?.rive?.viewModelInstance;
+      }
+      if (viewModelInstance) {
+        let index = 0;
+        while (index < path?.length) {
+          if(!viewModelInstance) {
+            return null;
+          }
+          viewModelInstance = viewModelInstance?.viewModel(path[index]);
+          index++;
+        }
+        return viewModelInstance;
+      }
+      return null;
+    }
+
+    function searchViewModelInstance() {
+      const instanceValue = getInstanceValue();
+      setViewModelValue(instanceValue);
+      currentArguments.current = {
+        parameters,
+        path,
+      };
+    }
+
+    if (!equal(path, parameters, currentArguments.current)) {
+      parameters.rive?.on(EventType.Load, searchViewModelInstance);
+      searchViewModelInstance();
+    }
+    return () => {
+      parameters.rive?.off(EventType.Load, searchViewModelInstance);
+    };
+  }, [path, userParameters]);
+
+  return viewModelInstance;
+}

src/hooks/useViewModelNumber.ts

@@ -0,0 +1,90 @@
+import { useState, useEffect, useRef } from 'react';
+import {
+  EventType,
+  ViewModelInstance,
+  ViewModelInstanceNumber,
+} from '@rive-app/canvas';
+import { UseViewModelInstanceNumberParameters } from '../types';
+import useViewModelInstanceProperty from './useViewModelInstanceProperty';
+
+const defaultParams: UseViewModelInstanceNumberParameters = {
+  viewModelInstance: null,
+  initialValue: 0,
+};
+
+const equal = (
+  name: string,
+  params: UseViewModelInstanceNumberParameters | null,
+  viewModelInstance: ViewModelInstance | null,
+  to: HookArguments | null
+): boolean => {
+  if (!params || !to) {
+    return false;
+  }
+  if (
+    params.initialValue !== to.parameters.initialValue ||
+    name !== to.name ||
+    viewModelInstance !== to.viewModelInstance
+  ) {
+    return false;
+  }
+  return true;
+};
+
+type HookArguments = {
+  name: string,
+  parameters: UseViewModelInstanceNumberParameters,
+  viewModelInstance: ViewModelInstance | null,
+}
+
+/**
+ * Custom hook for fetching a view model instance value.
+ *
+ * @param name - name of the propery
+ * @param path - Path to reach the required property
+ * @param userParameters - Parameters to load view model instance number
+ * @returns
+ */
+export default function useViewModelNumber(
+  name: string,
+  path: string[] = [],
+  userParameters?: UseViewModelInstanceNumberParameters
+): ViewModelInstanceNumber | null {
+  const [viewModel, setViewModelValue] =
+    useState<ViewModelInstanceNumber | null>(null);
+  const currentArguments = useRef<HookArguments | null>(
+    null
+  );
+
+  const viewModelInstance = useViewModelInstanceProperty(path, userParameters);
+
+  useEffect(() => {
+    const parameters = {
+      ...defaultParams,
+      ...userParameters,
+    };
+
+    function searchViewModelValue() {
+      const instanceValue = viewModelInstance?.number(name) || null;
+      if(instanceValue !== null && parameters.initialValue !== undefined) {
+        instanceValue.value = parameters.initialValue;
+      }
+      setViewModelValue(instanceValue);
+      currentArguments.current = {
+        parameters,
+        name,
+        viewModelInstance,
+      };
+    }
+
+    if (!equal(name, parameters, viewModelInstance, currentArguments.current)) {
+      parameters.rive?.on(EventType.Load, searchViewModelValue);
+      searchViewModelValue();
+    }
+    return () => {
+      parameters.rive?.off(EventType.Load, searchViewModelValue);
+    };
+  }, [name, userParameters, viewModelInstance]);
+
+  return viewModel;
+}

src/hooks/useViewModelProperties.ts

@@ -0,0 +1,173 @@
+import { useState, useEffect, useRef } from 'react';
+import {
+  EventType,
+  ViewModelInstance,
+  ViewModelInstanceValue,
+} from '@rive-app/canvas';
+import { UseViewModelInstanceValueParameters } from '../types';
+
+const defaultParams: UseViewModelInstanceValueParameters = {
+  viewModelInstance: null,
+};
+
+const equal = (
+  properties: string[],
+  params: UseViewModelInstanceValueParameters | null,
+  to: HookArguments | null
+): boolean => {
+  if (!params || !to) {
+    return false;
+  }
+  if (properties.length !== to.properties.length) {
+    return false;
+  }
+  for (let i = 0; i < properties.length; i += 1) {
+    if (properties[i] !== to.properties[i]) {
+      return false;
+    }
+  }
+  if (
+    params.rive !== to.parameters.rive ||
+    params.viewModelInstance !== to.parameters.viewModelInstance
+  ) {
+    return false;
+  }
+  return true;
+};
+
+type HookArguments = {
+  properties: string[];
+  parameters: UseViewModelInstanceValueParameters;
+};
+
+type PropertyResult = {
+  query: string;
+  property: ViewModelInstanceValue | null;
+};
+
+/**
+ * Custom hook for fetching a view model instance value.
+ *
+ * @param properties - list of queries properties
+ * @param path - Path to reach the required property
+ * @param userParameters - Parameters to load view model properties
+ * @returns
+ */
+export default function useViewModelProperties(
+  properties: string[],
+  userParameters?: UseViewModelInstanceValueParameters
+): PropertyResult[] {
+  const [result, setResult] = useState<PropertyResult[]>([]);
+  const currentArguments = useRef<HookArguments | null>(null);
+
+  useEffect(() => {
+    const parameters = {
+      ...defaultParams,
+      ...userParameters,
+    };
+
+    function getViewModelInstance() {
+      if (parameters.viewModelInstance) {
+        return parameters.viewModelInstance;
+      } else if (parameters.rive) {
+        return parameters.rive.viewModelInstance;
+      }
+      return null;
+    }
+
+    function getPropertyViewModelInstance(
+      path: string
+    ): ViewModelInstance | null {
+      const viewModelInstance: ViewModelInstance | null = getViewModelInstance();
+      if(path === '') {
+        return viewModelInstance;
+      }
+      return viewModelInstance?.viewModel(path) || null;
+    }
+
+    function getProperty(
+      viewModelInstance: ViewModelInstance | null,
+      name: string
+    ): ViewModelInstanceValue | null {
+      if (viewModelInstance) {
+        const viewModelProperties = viewModelInstance.properties;
+        const propertyData = viewModelProperties.find((candidate) => {
+          if (candidate.name === name) {
+            return candidate;
+          }
+        });
+        if (propertyData !== null) {
+          switch (propertyData!.type.toString()) {
+            case 'number':
+              return viewModelInstance.number(name);
+            case 'string':
+              return viewModelInstance.string(name);
+            case 'boolean':
+              return viewModelInstance.boolean(name);
+            case 'enumType':
+              return viewModelInstance.enum(name);
+            case 'color':
+              return viewModelInstance.color(name);
+            case 'trigger':
+              return viewModelInstance.trigger(name);
+          }
+        }
+      }
+      return null;
+    }
+
+    function searchViewModelValues() {
+      const viewModelInstance = getViewModelInstance();
+      if (!viewModelInstance) {
+        setResult([]);
+      } else {
+        const result: PropertyResult[] = [];
+        properties.forEach((propertyQuery) => {
+          if (propertyQuery === '') {
+            result.push({
+              query: propertyQuery,
+              property: null,
+            });
+          } else {
+            const propertyParts = propertyQuery.split('/');
+            const propertyName = propertyParts.pop();
+            const propertyViewModelPath = propertyParts.join('/');
+            const propertyViewModelInstance = getPropertyViewModelInstance(
+              propertyViewModelPath
+            );
+            const property = getProperty(
+              propertyViewModelInstance,
+              propertyName!
+            );
+            if (property) {
+              result.push({
+                query: propertyQuery,
+                property: property,
+              });
+            } else {
+              result.push({
+                query: propertyQuery,
+                property: null,
+              });
+            }
+          }
+        });
+        setResult(result);
+      }
+      currentArguments.current = {
+        properties: properties,
+        parameters: parameters,
+      };
+    }
+
+    if (!equal(properties, parameters, currentArguments.current)) {
+      parameters.rive?.on(EventType.Load, searchViewModelValues);
+      searchViewModelValues();
+    }
+    return () => {
+      parameters.rive?.off(EventType.Load, searchViewModelValues);
+    };
+  }, [name, userParameters]);
+
+  return result;
+}

src/hooks/useViewModelProperty.ts

@@ -0,0 +1,112 @@
+import { useState, useEffect, useRef } from 'react';
+import {
+  EventType,
+  ViewModelInstance,
+} from '@rive-app/canvas';
+import {
+  UseViewModelInstancePropertyType,
+  AcceptedVieModelType,
+} from '../types';
+import useViewModelInstanceProperty from './useViewModelInstanceProperty';
+import { DataType } from '@rive-app/canvas/rive_advanced.mjs';
+
+const defaultParams: UseViewModelInstancePropertyType = {
+  viewModelInstance: null,
+};
+
+const equal = <U extends UseViewModelInstancePropertyType>(
+  name: string,
+  params: U | null,
+  viewModelInstance: ViewModelInstance | null,
+  to: HookArguments | null
+): boolean => {
+  if (!params || !to) {
+    return false;
+  }
+  if (
+    params.initialValue !== to.parameters.initialValue ||
+    name !== to.name ||
+    viewModelInstance !== to.viewModelInstance
+  ) {
+    return false;
+  }
+  return true;
+};
+
+type HookArguments = {
+  name: string;
+  parameters: UseViewModelInstancePropertyType;
+  viewModelInstance: ViewModelInstance | null;
+};
+
+/**
+ * Custom hook for fetching a view model instance value.
+ *
+ * @param name - name of the propery
+ * @param path - Path to reach the required property
+ * @param userParameters - Parameters to load view model instance number
+ * @returns
+ */
+export default function useViewModelProperty<
+  T extends UseViewModelInstancePropertyType,
+  U extends AcceptedVieModelType<T>
+>(name: string, path: string[] = [], userParameters?: T): U | null {
+  const [viewModel, setViewModelValue] = useState<AcceptedVieModelType<T> | null>(null);
+  const currentArguments = useRef<HookArguments | null>(null);
+
+  const viewModelInstance = useViewModelInstanceProperty(path, userParameters);
+
+  useEffect(() => {
+    const parameters: T = {
+      ...defaultParams,
+      ...(userParameters as T),
+    };
+
+    function getVMI(name: string): U | null {
+      const properties = viewModelInstance!.properties;
+      const propData = properties.find((value) => value.name === name);
+      if (propData === null) {
+        return null;
+      }
+      if (propData!.type === DataType.number) {
+        return viewModelInstance!.number(name) as U;
+      } else if (propData!.type === DataType.string) {
+        return viewModelInstance!.string(name) as U;
+      } else if (propData!.type === DataType.boolean) {
+        return viewModelInstance!.boolean(name) as U;
+      } else if (propData!.type === DataType.color) {
+        return viewModelInstance!.color(name) as U;
+      }
+      return null;
+    }
+
+    function setInitialValue(property: U, params: T) {
+      if (params.initialValue !== undefined) {
+        property.value = params.initialValue;
+      }
+    }
+
+    function searchViewModelValue() {
+      const instanceValue = getVMI(name);
+      if (instanceValue !== null) {
+        setInitialValue(instanceValue, parameters);
+      }
+      setViewModelValue(instanceValue);
+      currentArguments.current = {
+        parameters,
+        name,
+        viewModelInstance,
+      };
+    }
+
+    if (!equal(name, parameters, viewModelInstance, currentArguments.current)) {
+      parameters.rive?.on(EventType.Load, searchViewModelValue);
+      searchViewModelValue();
+    }
+    return () => {
+      parameters.rive?.off(EventType.Load, searchViewModelValue);
+    };
+  }, [name, userParameters, viewModelInstance]);
+
+  return viewModel as U;
+}

src/index.ts

@@ -1,10 +1,29 @@
 import Rive, { RiveProps } from './components/Rive';
 import useRive from './hooks/useRive';
 import useStateMachineInput from './hooks/useStateMachineInput';
+import useViewModel from './hooks/useViewModel';
+import useViewModelInstance from './hooks/useViewModelInstance';
+import useViewModelNumber from './hooks/useViewModelNumber';
+import useViewModelProperties from './hooks/useViewModelProperties';
 import useResizeCanvas from './hooks/useResizeCanvas';
 import useRiveFile from './hooks/useRiveFile';
 
 export default Rive;
-export { useRive, useStateMachineInput, useResizeCanvas, useRiveFile , RiveProps };
-export { RiveState, UseRiveParameters, UseRiveFileParameters, UseRiveOptions } from './types';
+export {
+  useRive,
+  useStateMachineInput,
+  useResizeCanvas,
+  useRiveFile,
+  useViewModel,
+  useViewModelInstance,
+  useViewModelNumber,
+  useViewModelProperties,
+  RiveProps,
+};
+export {
+  RiveState,
+  UseRiveParameters,
+  UseRiveFileParameters,
+  UseRiveOptions,
+} from './types';
 export * from '@rive-app/canvas';

src/types.ts

@@ -3,6 +3,11 @@ import {
   RiveFile,
   RiveFileParameters,
   RiveParameters,
+  ViewModelInstance,
+  ViewModelInstanceBoolean,
+  ViewModelInstanceNumber,
+  ViewModelInstanceString,
+  ViewModelInstanceColor,
 } from '@rive-app/canvas';
 import { ComponentProps, RefCallback } from 'react';
 
@@ -57,3 +62,56 @@ export type RiveFileState = {
   riveFile: RiveFile | null;
   status: FileStatus;
 };
+
+export type UseViewModelParameters = {
+  useDefault?: boolean;
+  name?: string;
+};
+
+export type UseViewModelInstanceParameters = {
+  useNew?: boolean;
+  useDefault?: boolean;
+  name?: string;
+};
+
+export type UseViewModelInstanceValueParameters = {
+  viewModelInstance?: ViewModelInstance | null;
+  rive?: Rive | null;
+};
+
+export type UseViewModelInstanceNumberParameters =
+  UseViewModelInstanceValueParameters & {
+    initialValue?: number;
+  };
+
+export type UseViewModelInstanceStringParameters =
+  UseViewModelInstanceValueParameters & {
+    initialValue?: string;
+  };
+
+export type UseViewModelInstanceBooleanParameters =
+  UseViewModelInstanceValueParameters & {
+    initialValue?: boolean;
+  };
+
+export type UseViewModelInstanceColorParameters =
+  UseViewModelInstanceValueParameters & {
+    initialValue?: number;
+  };
+
+export type UseViewModelInstancePropertyType =
+  | UseViewModelInstanceNumberParameters
+  | UseViewModelInstanceStringParameters
+  | UseViewModelInstanceBooleanParameters
+  | UseViewModelInstanceColorParameters;
+
+export type AcceptedVieModelType<T> =
+  T extends UseViewModelInstanceNumberParameters
+    ? ViewModelInstanceNumber
+    : T extends UseViewModelInstanceStringParameters
+    ? ViewModelInstanceString
+    : T extends UseViewModelInstanceBooleanParameters
+    ? ViewModelInstanceBoolean
+    : T extends UseViewModelInstanceColorParameters
+    ? ViewModelInstanceColor
+    : never;