feat: configurable canvas config.onResize callback

src/renderer.tsx

@@ -140,17 +140,11 @@ export function render(
     if (state.frameloop !== 'never') animate()
 
     // Handle resize
-    function onResize(state: RootState) {
-      const { width, height } = state.size
-      const projection = state.orthographic ? 'orthographic' : 'perspective'
-
-      if (state.renderer.width !== width || state.renderer.height !== height || state.camera.type !== projection) {
-        state.renderer.setSize(width, height)
-        state.camera[projection]({ aspect: width / height })
-      }
+    const onResize = config.onResize ?? onResizeDefault
+    if (onResize) {
+      store.subscribe(onResize)
+      onResize(state)
     }
-    store.subscribe(onResize)
-    onResize(state)
 
     // Report when an error was detected in a previous render
     const logRecoverableError = typeof reportError === 'function' ? reportError : console.error
@@ -189,6 +183,19 @@ export function render(
   return root.store
 }
 
+/**
+ * Default resize callback.
+ */
+function onResizeDefault(state: RootState) {
+  const { width, height } = state.size
+  const projection = state.orthographic ? 'orthographic' : 'perspective'
+
+  if (state.renderer.width !== width || state.renderer.height !== height || state.camera.type !== projection) {
+    state.renderer.setSize(width, height)
+    state.camera[projection]({ aspect: width / height })
+  }
+}
+
 /**
  * Removes and cleans up internals on unmount.
  */

src/types.ts

@@ -103,6 +103,7 @@ export interface RenderProps {
   camera?: OGL.Camera | OGLElement<typeof OGL.Camera> | Partial<OGL.CameraOptions>
   scene?: OGL.Transform
   events?: EventManager
+  onResize?: (state: RootState)=> void
   onCreated?: (state: RootState) => any
 }