Feature: Canvas.tsx optionally binds to an existing canvas element found by a querySelector

[kenlane33]

I aim to integrate some of these tasty Components into another platform that also uses THREE.js.
That platform already initializes a canvas.
How might the Canvas component receive a querySelector and

use a found existing canvas in place of creating its own new one?

My perusal of Canvas.ts demonstrated lots of good Provider work needed for setup there.

[CodyJasonBennett]

You can use the createRoot API to have R3F render into an existing canvas element:

• https://docs.pmnd.rs/react-three-fiber/api/canvas#custom-canvas

import * as React from 'react'
import { createRoot, events } from '@react-three/fiber'

function CustomCanvas({ children }) {
  // Init root from canvas
  const [canvas, setCanvas] = React.useState()
  const root = React.useMemo(() => canvas && createRoot(canvas, { events }), [canvas])
  // Render children as a render-effect
  root?.render(children)
  // Cleanup on unmount
  React.useEffect(() => () => root?.unmount(), [root])
  // Use callback-style ref to access canvas in render
  return <canvas ref={setCanvas} />
}