adding resize example

update name
ensure we re evaluate state machine inputs when we play is triggered, looks like there maybe additional situations where we are going to need this.
2026-03-13 08:22:30 +08:00 · 2022-07-21 17:00:42 +02:00 · 2022-07-21 17:00:21 +02:00 · 2022-07-21 10:17:27 +01:00 · 2022-07-21 10:08:52 +01:00
9 changed files with 190 additions and 25 deletions
--- a/examples/resize-test/README.md
+++ b/examples/resize-test/README.md
@@ -0,0 +1,32 @@
 # To run
 This is a basic showcase of a resize issue we have, to test this locally with rive-react changes
 1. run `npm start`
 2. run `npm run build` for the rive-react project
 If you want to also test local wasm changes: 
 1. update `rive-react`/package.json to a locally checked out version of rive-wasm's canvas_single
 `"@rive-app/canvas": "../rive-wasm/js/npm/canvas_single",`
 2. cd to `rive-wasm/js` & run `npm run dev` (keep this going as it will watch for changes)
 3. run `npm start`
 4. run `npm run build` for the rive-react project
 # Resize issue: 
 update parameters in `utils.ts` to see this for yourself.
 Resizing from window.resize
    - bottom animation moves slower than rest
    - cannot deal with the animations container resizing, unless its linked to the window resizing
 Resizing from ResizeObserver
    - all animations move together super smooth when resizing
    - top two animations flicker to white (blank canvas) when resizing
 Resizing form ResizeObserver - throttled (current default)
    - all animations move "together"
    - resizing looks pretty smooth, but everything lags behind a bit.
 # Other issues
 its also very slow resizing when dev tools is open, its fine when closed though.
--- a/examples/resize-test/package.json
+++ b/examples/resize-test/package.json
@@ -0,0 +1,36 @@
 {
  "name": "basic-with-hook",
  "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": "file:../../node_modules/react",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "rive-react": "file:../..",
    "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"
    ]
  }
 }
--- a/examples/resize-test/public/index.html
+++ b/examples/resize-test/public/index.html
@@ -0,0 +1,17 @@
 <!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 - Basic with Hook</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
 </html>
--- a/examples/resize-test/public/magic-ball.riv
+++ b/examples/resize-test/public/magic-ball.riv
--- a/examples/resize-test/public/poison-loader.riv
+++ b/examples/resize-test/public/poison-loader.riv
--- a/examples/resize-test/src/App.js
+++ b/examples/resize-test/src/App.js
@@ -0,0 +1,30 @@
 import { useRive } from 'rive-react';
 function App() {
  const params = {
    src: 'poison-loader.riv',
    autoplay: true,
  };
  const { RiveComponent: RiveComponentBasic } = useRive(params);
  const { RiveComponent: RiveComponentBasic2 } = useRive(params);
  const { RiveComponent: RiveComponentBasic3 } = useRive(params);
  return (
    <>
      <div style={{ width: '100%' }}>
        <div style={{ height: '300px', width: '100%' }}>
          <RiveComponentBasic />
        </div>
        <div style={{ height: '300px', width: '100%' }}>
          <RiveComponentBasic2 />
        </div>
        <div style={{ height: '300px', width: '100%' }}>
          <RiveComponentBasic3 />
        </div>
      </div>
    </>
  );
 }
 export default App;
--- a/examples/resize-test/src/index.js
+++ b/examples/resize-test/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')
 );
--- a/src/hooks/useStateMachineInput.ts
+++ b/src/hooks/useStateMachineInput.ts
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Rive, StateMachineInput } from '@rive-app/canvas';
+import { EventType, Rive, StateMachineInput } from '@rive-app/canvas';
 /**
 * Custom hook for fetching a stateMachine input from a rive file.
@@ -18,21 +18,33 @@ export default function useStateMachineInput(
  const [input, setInput] = useState<StateMachineInput | null>(null);
  useEffect(() => {
-    if (!rive || !stateMachineName || !inputName) {
+    function setStateMachineInput() {
-      setInput(null);
+      if (!rive || !stateMachineName || !inputName) {
-    }
+        setInput(null);
    if (rive && stateMachineName && inputName) {
      const inputs = rive.stateMachineInputs(stateMachineName);
      if (inputs) {
        const selectedInput = inputs.find((input) => input.name === inputName);
        if (initialValue !== undefined && selectedInput) {
          selectedInput.value = initialValue;
        }
        setInput(selectedInput || null);
      }
-    } else {
+
-      setInput(null);
+      if (rive && stateMachineName && inputName) {
        const inputs = rive.stateMachineInputs(stateMachineName);
        if (inputs) {
          const selectedInput = inputs.find(
            (input) => input.name === inputName
          );
          if (initialValue !== undefined && selectedInput) {
            selectedInput.value = initialValue;
          }
          setInput(selectedInput || null);
        }
      } else {
        setInput(null);
      }
    }
    setStateMachineInput();
    if (rive) {
      rive.on(EventType.Play, () => {
        // Check if the component/canvas is mounted before setting state to avoid setState
        // on an unmounted component in some rare cases
        setStateMachineInput();
      });
    }
  }, [rive]);
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -8,8 +8,20 @@ class FakeResizeObserver {
  disconnect() {}
 }
 function throttle(f: Function, delay: number) {
  let timer = 0;
  return function (this: Function, ...args: any) {
    clearTimeout(timer);
    timer = setTimeout(() => f.apply(this, args), delay) as unknown as number;
  };
 }
 const MyResizeObserver = globalThis.ResizeObserver || FakeResizeObserver;
 const hasResizeObserver = globalThis.ResizeObserver !== undefined;
 const preferResizeObserver = true;
 const throttleResizeObserver = true;
 const useResizeObserver = hasResizeObserver && preferResizeObserver;
 const useWindowListener = !useResizeObserver;
 export function useSize(
  containerRef: React.MutableRefObject<HTMLElement | null>
@@ -29,32 +41,48 @@ export function useSize(
        });
      };
-      if (!hasResizeObserver) {
+      if (useWindowListener) {
        // only pay attention to window size changes when we do not have the resizeObserver (IE only)
        window.addEventListener('resize', handleResize);
        handleResize();
        window.addEventListener('resize', handleResize);
      }
      return () => window.removeEventListener('resize', handleResize);
    }
  }, []);
  const observer = useRef(
-    new MyResizeObserver((entries) => {
+    new MyResizeObserver(
-      setSize({
+      throttleResizeObserver
-        width: entries[entries.length - 1].contentRect.width,
+        ? throttle((entries: any) => {
-        height: entries[entries.length - 1].contentRect.height,
+            if (useResizeObserver) {
-      });
+              setSize({
-    })
+                width: entries[entries.length - 1].contentRect.width,
                height: entries[entries.length - 1].contentRect.height,
              });
            }
          }, 16)
        : (entries: any) => {
            if (useResizeObserver) {
              setSize({
                width: entries[entries.length - 1].contentRect.width,
                height: entries[entries.length - 1].contentRect.height,
              });
            }
          }
    )
  );
  useEffect(() => {
    const current = observer.current;
-    if (containerRef.current) {
+    if (containerRef.current && useResizeObserver) {
      current.observe(containerRef.current);
    }
    return () => {
      current.disconnect();
      if (containerRef.current && useResizeObserver) {
        current.unobserve(containerRef.current);
      }
    };
  }, [containerRef, observer]);
Author	SHA1	Message	Date
Maxwell Talbot	25afe7d77e	adding resize example	2022-07-21 17:00:42 +02:00
Maxwell Talbot	258270b4fc	update name	2022-07-21 17:00:21 +02:00
Maxwell Talbot	41962ef864	ensure we re evaluate state machine inputs when we play is triggered, looks like there maybe additional situations where we are going to need this.	2022-07-21 10:17:27 +01:00
Maxwell Talbot	c69fffa5cf	update resize behaviour to throttle, add parameters to enable switching modes	2022-07-21 10:08:52 +01:00