PointerLockControls r3f drei typescript setting useRef

Questions
, ,
1 
import { PointerLockControls, PointerLockControlsProps } from '@react-three/drei';

const plControls = useRef<PointerLockControlsProps>(null!);
<PointerLockControls ref={plControls} />

given the above, I’m getting the error

Type 'MutableRefObject<PointerLockControlsProps>' is not assignable to type 'Ref<PointerLockControls> | undefined'.

I tried setting plControls to useRef but that doesn’t work since PointerLockControls isn’t a type. Any workarounds or help to the problem is appreciated!

2

doesnt the ide show the type why you hover the ref? it should. PointerLockControlsProps refers to the component props. all of drei uses stdlib instead of examples/jsm, you want the actual class thats being used in the end.

import { PointerLockControls as PointerLockControlsImpl } from 'three-stdlib'

...
const plControls = useRef<PointerLockControlsImpl>(null!)
...
<PointerLockControls ref={plControls} />
1 Like