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} />

[github-actions[bot]]

Thank you for contributing! We’re marking this issue as stale as a gentle reminder to revisit it and give it the attention it needs to move forward.

Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.

Feel free to reach out on Discord if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!