diff --git a/examples/basic/public/flower.riv b/examples/basic/public/flower.riv
new file mode 100644
index 0000000..7d4fa91
Binary files /dev/null and b/examples/basic/public/flower.riv differ
diff --git a/examples/basic/src/App.js b/examples/basic/src/App.js
index e784b69..4e4d406 100644
--- a/examples/basic/src/App.js
+++ b/examples/basic/src/App.js
@@ -1,11 +1,13 @@
-import Rive from 'rive-react';
+import SizeExample from './SizeExample';
+import FlowerExample from './FlowerExample';
function App() {
return (
// The animation will fit to the parent element.
-
-
+ <>
+ Larger
+ Smaller
+
+
+
+ );
+}
+
+export default FlowerExample;
diff --git a/examples/basic/src/SizeExample.js b/examples/basic/src/SizeExample.js
new file mode 100644
index 0000000..9faed1f
--- /dev/null
+++ b/examples/basic/src/SizeExample.js
@@ -0,0 +1,48 @@
+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.
+ <>
+ Larger
+ Smaller
+
+
+
+ );
+}
+
+export default SizeExample;
diff --git a/package-lock.json b/package-lock.json
index 8380a1a..92b3333 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
"version": "0.0.26",
"license": "MIT",
"dependencies": {
- "rive-js": "0.7.33"
+ "@rive/webgl_single": "file:../rive-wasm/js/npm/webgl_single"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.13.0",
@@ -42,6 +42,50 @@
"react": "^16.8.0 || ^17.0.0"
}
},
+ "../rive-wasm/js": {
+ "name": "rive-js",
+ "version": "1.0.0",
+ "license": "MIT",
+ "devDependencies": {
+ "@babel/core": "^7.14.3",
+ "@babel/plugin-transform-modules-commonjs": "^7.14.0",
+ "@babel/preset-env": "^7.14.4",
+ "@babel/preset-typescript": "^7.13.0",
+ "@types/jest": "^26.0.23",
+ "babel-jest": "^27.0.2",
+ "jest": "^26.6.3",
+ "jest-canvas-mock": "^2.3.1",
+ "ts-jest": "^26.5.6",
+ "ts-loader": "^9.2.3",
+ "typescript": "^4.3.2",
+ "webpack": "^5.38.1",
+ "webpack-cli": "^4.7.2"
+ }
+ },
+ "../rive-wasm/js/npm": {},
+ "../rive-wasm/js/npm/canvas": {
+ "name": "@rive/canvas",
+ "version": "1.0.0",
+ "extraneous": true,
+ "license": "MIT"
+ },
+ "../rive-wasm/js/npm/canvas_single": {
+ "name": "@rive/canvas-single",
+ "version": "1.0.0",
+ "extraneous": true,
+ "license": "MIT"
+ },
+ "../rive-wasm/js/npm/webgl": {
+ "name": "@rive/webgl",
+ "version": "1.0.0",
+ "extraneous": true,
+ "license": "MIT"
+ },
+ "../rive-wasm/js/npm/webgl_single": {
+ "name": "@rive/webgl-single",
+ "version": "1.0.0",
+ "license": "MIT"
+ },
"node_modules/@babel/code-frame": {
"version": "7.16.0",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz",
@@ -2337,6 +2381,10 @@
"@octokit/openapi-types": "^7.3.5"
}
},
+ "node_modules/@rive/webgl_single": {
+ "resolved": "../rive-wasm/js/npm/webgl_single",
+ "link": true
+ },
"node_modules/@rollup/plugin-babel": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.2.1.tgz",
@@ -9518,11 +9566,6 @@
"url": "https://github.com/sponsors/isaacs"
}
},
- "node_modules/rive-js": {
- "version": "0.7.33",
- "resolved": "https://registry.npmjs.org/rive-js/-/rive-js-0.7.33.tgz",
- "integrity": "sha512-u/dqr4XYx1TOo5xtSCN+6YvUKYU88ii6xWP82Xz15O4OqF3GM1Pa4WXx4dEOa6QG6IqbM0JcfsAhae7TjVZf6Q=="
- },
"node_modules/rollup": {
"version": "1.32.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.0.tgz",
@@ -12704,6 +12747,9 @@
"@octokit/openapi-types": "^7.3.5"
}
},
+ "@rive/webgl_single": {
+ "version": "file:../rive-wasm/js/npm/webgl_single"
+ },
"@rollup/plugin-babel": {
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.2.1.tgz",
@@ -18100,11 +18146,6 @@
"glob": "^7.1.3"
}
},
- "rive-js": {
- "version": "0.7.33",
- "resolved": "https://registry.npmjs.org/rive-js/-/rive-js-0.7.33.tgz",
- "integrity": "sha512-u/dqr4XYx1TOo5xtSCN+6YvUKYU88ii6xWP82Xz15O4OqF3GM1Pa4WXx4dEOa6QG6IqbM0JcfsAhae7TjVZf6Q=="
- },
"rollup": {
"version": "1.32.0",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-1.32.0.tgz",
diff --git a/package.json b/package.json
index 4be60b0..4438144 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,7 @@
},
"homepage": "https://github.com/rive-app/rive-react#readme",
"dependencies": {
- "rive-js": "0.7.33"
+ "@rive/webgl_single": "file:../rive-wasm/js/npm/webgl_single"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0"
diff --git a/src/components/Rive.tsx b/src/components/Rive.tsx
index d759ffe..1ea9f75 100644
--- a/src/components/Rive.tsx
+++ b/src/components/Rive.tsx
@@ -1,4 +1,4 @@
-import { Layout } from 'rive-js';
+import { Layout } from '@rive/webgl_single';
import React, { ComponentProps } from 'react';
import useRive from '../hooks/useRive';
diff --git a/src/hooks/useRive.tsx b/src/hooks/useRive.tsx
index 131ba33..49f32ab 100644
--- a/src/hooks/useRive.tsx
+++ b/src/hooks/useRive.tsx
@@ -6,7 +6,7 @@ import React, {
ComponentProps,
RefCallback,
} from 'react';
-import { Rive, EventType } from 'rive-js';
+import { Rive, EventType } from '@rive/webgl_single';
import {
UseRiveParameters,
UseRiveOptions,
@@ -125,11 +125,12 @@ export default function useRive(
containerRef.current.style.height = height + 'px';
}
if (options.useDevicePixelRatio) {
- 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';
+ 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';
} else {
canvasRef.current.width = width;
canvasRef.current.height = height;
diff --git a/src/hooks/useStateMachineInput.ts b/src/hooks/useStateMachineInput.ts
index 8183108..c37e204 100644
--- a/src/hooks/useStateMachineInput.ts
+++ b/src/hooks/useStateMachineInput.ts
@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
-import { Rive, StateMachineInput } from 'rive-js';
+import { Rive, StateMachineInput } from '@rive/webgl_single';
/**
* Custom hook for fetching a stateMachine input from a rive file.
diff --git a/src/index.ts b/src/index.ts
index d467f28..316196f 100644
--- a/src/index.ts
+++ b/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-js';
+export * from '@rive/webgl_single';
diff --git a/src/types.ts b/src/types.ts
index 074ece6..029b0c1 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,5 @@
import { RefCallback, ComponentProps } from 'react';
-import { Rive, RiveParameters } from 'rive-js';
+import { Rive, RiveParameters } from '@rive/webgl_single';
export type UseRiveParameters = Partial> | null;
diff --git a/tsconfig.json b/tsconfig.json
index d27a1a3..de28a91 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,6 +6,7 @@
"lib": ["esnext", "dom"],
"module": "commonjs",
"moduleResolution": "node",
+ "noImplicitAny": false,
"noFallthroughCasesInSwitch": true,
"noUnusedLocals": true,
"noUnusedParameters": true,