fix(canvas): add React props for canvas

.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "dist/index.js": {
-    "bundled": 23703,
-    "minified": 11181,
-    "gzipped": 4126,
+    "bundled": 23760,
+    "minified": 11202,
+    "gzipped": 4128,
     "treeshaked": {
       "rollup": {
-        "code": 9273,
+        "code": 9294,
         "import_statements": 578
       },
       "webpack": {
-        "code": 10833
+        "code": 10854
       }
     }
   },
   "dist/index.cjs.js": {
-    "bundled": 26698,
-    "minified": 12883,
-    "gzipped": 4345
+    "bundled": 26755,
+    "minified": 12904,
+    "gzipped": 4349
   }
 }

src/canvas.tsx

@@ -3,7 +3,7 @@ import React, { useRef, useEffect, useState, useCallback } from 'react'
 import ResizeObserver from 'resize-observer-polyfill'
 import { invalidate, applyProps, render, unmountComponentAtNode } from './reconciler'
 
-export const stateContext = React.createContext()
+export const stateContext = React.createContext({})
 
 function useMeasure() {
   const ref = useRef()
@@ -16,8 +16,18 @@ function useMeasure() {
   return [{ ref }, bounds]
 }
 
+type CanvasProps = {
+  children: React.ReactChildren;
+  gl: THREE.WebGLRenderer;
+  camera?: THREE.Camera;
+  style?: React.CSSProperties;
+  pixelRatio?: number;
+  invalidateFrameloop?: boolean;
+  onCreated: (ref: React.MutableRefObject<any>) => any,
+}
+
 export const Canvas = React.memo(
-  ({ children, gl, camera, style, pixelRatio, invalidateFrameloop = false, onCreated, ...rest }) => {
+  ({ children, gl, camera, style, pixelRatio, invalidateFrameloop = false, onCreated, ...rest }: CanvasProps) => {
     // Local, reactive state
     const canvas = useRef()
     const [ready, setReady] = useState(false)