Can you get a ref for the <Canvas /> with TypeScript?

[fnick851]

Hi, is there a way to get a ref to the DOM of the <Canvas /> element? I see it is rendered as a <div /> in the browser. With TypeScript, it shows an error Property 'ref' does not exist on type 'IntrinsicAttributes & ContainerProps'. Thank you.

[joshuaellis]

Are you referring to the dom <canvas> element or it's container? the <canvas> dom element can be accessed using the useThree hook:

const { gl } = useThree()

React.useEffect(() => {
  console.log(gl.domElement) // will show me the `<canvas>` dom element.
}, [])

[drcmda]

yes, that would be the way. the canvas does not supports refs atm and it would also be a little strange because that ref wouldn't be the one the canvas mounts in bc we need another for the resize observer.

[fnick851]

@joshuaellis
@drcmda
I was referring to the parent <div> of the <canvas> dom, but your answers helped me clarify a few things. Thanks!