How to define the type of Canvas props

[bcjohnblue]

I used the ContainerProps to define the type of Canvas element when using the version 5 of R3F. However, when I update it to version 6, the ContainerProps is not even exist. How can I define the type of Canvas in R3F version 6 ?

import { Canvas, ContainerProps } from 'react-three-fiber';

const canvasProps: Omit<ContainerProps, 'children'> = {
  className: 'my-canvas',
  gl: {
    antialias: true,
  },
  pixelRatio: devicePixelRatio,
  camera: {
    fov: 60,
    position: [-5, 2, 5],
  }
};

<Canvas {...canvasProps}>

[drcmda]

i think you can just hover or command-click something in your IDE to figure out types

import { Props } from '@react-three/fiber'

[bcjohnblue]

No the @react-three/fiber doesn't export the Props. The props just export from Canvas file and can only be imported by

import { Props } from '@react-three/fiber/dist/declarations/src/web/Canvas';

However, it seems not reasonable. I think import Props from @react-three/fiber should be accepted.
By the way, I am using the version of @react-three/fiber: "^6.0.16".

[drcmda]

Oh ok in that case it must be exported, I thought that's already the case

[dangrabcad]

It's the same with RootState (which you need for useThree selectors) and ThreeEvent (which you need for event handlers). Neither of them are exported from @react-three/fiber, you need to go into dist/declarations to get them.