Add example of webgl issues

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.
-    <div style={{ height: '500px', width: '500px' }}>
-      <Rive src="poison-loader.riv" autoplay />
-    </div>
+    <>
+      <SizeExample />
+      <FlowerExample />
+    </>
   );
 }
 

examples/basic/src/FlowerExample.js

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { useRive } from 'rive-react';
+
+function FlowerExample() {
+  const { rive, canvas, RiveComponent } = useRive({
+    src: 'flower.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.
+    <>
+      <button onClick={onLargerClick}>Larger</button>
+      <button onClick={onSmallerClick}>Smaller</button>
+      <div>
+        <RiveComponent />
+      </div>
+    </>
+  );
+}
+
+export default FlowerExample;

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.
+    <>
+      <button onClick={onLargerClick}>Larger</button>
+      <button onClick={onSmallerClick}>Smaller</button>
+      <div>
+        <RiveComponent />
+      </div>
+    </>
+  );
+}
+
+export default SizeExample;