OrbitControl has wrong prop type

[kian00sh]

• three version: 0.135.0
• @react-three/fiber version: 7.0.21
• @react-three/drei version: 7.27.3
• node version: 17.3.1
• npm (or yarn) version: 1.22.17

Problem description:

Expected type of OrbitalControl.ref is defined as React.Ref<OrbitControls> | undefined whereas the actual return type of the prop is OrbitControlProps

Relevant code:

Code:

const controlRef = useRef<OrbitControlsProps>(null);

<OrbitControls
  enableDamping={false}
  maxPolarAngle={Math.PI / 2}
  minAzimuthAngle={Math.PI / 2}
  ref={controlRef}
/>

Error:

Type 'RefObject<OrbitControlsProps>' is not assignable to type 'Ref<OrbitControls> | undefined'.
  Type 'RefObject<OrbitControlsProps>' is not assignable to type 'RefObject<OrbitControls>'.
    Type 'OrbitControlsProps' is not assignable to type 'OrbitControls'.
      Types of property 'object' are incompatible.
        Type 'Camera | undefined' is not assignable to type 'Camera'.
          Type 'undefined' is not assignable to type 'Camera'.ts(2322)

Suggested solution:

Change the type to React.Ref<OrbitControlProps> | undefined

[CodyJasonBennett]

I think this is something to be done in user-land, OrbitControls will always write OrbitControlProps to ref.

You can try a few things like non-null assertions or adding null:

const controlRef = useRef<OrbitControlsProps>(null!)
//
const controlRef = useRef<OrbitControlsProps | null>(null)

[bjornstar]

Almost there:

import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib'

const ref = useRef<OrbitControlsImpl>(null)

<OrbitControls ref={ref} />