Whats the best was to pass props to the parent component of the CANVAS.

[dannyWoodford]

I know the only item in the "Gotchas" of the r3f docs is passing props down from a parent component to the Canvas. The way to get around this is using a ContextBridge or state management system but is there any good way to pass props out of the canvas?

For example: Having the in-and-out dolly of OrbitControls with a min and minDistance so that it proportionately moves a css slider outside of the canvas?

currently, I can achieve this with this code but it's slow and there are too many calls, so much so that the position of the camera outpaces the calls and creates a "rubber band-like" effect that feels really loose.

---

`import React, { useEffect, useRef } from 'react'
import { PerspectiveCamera, OrbitControls } from '@react-three/drei'
import { earthRadius } from "satellite.js/lib/constants"

export default function Setup({ ...props }) {
const orbitCon = useRef()
const orbitControler = orbitCon.current
const setZoomValue = props.setZoomValue

useEffect(() => {
	if (orbitControler) { 
		orbitControler.addEventListener('change', (e) => { 
			let orbitDistance = orbitControler.target.distanceTo( orbitControler.object.position )
			let orbitDistanceRounded = Math.round(orbitDistance)

			setZoomValue(orbitDistanceRounded)
		})
	}
}, [orbitControler, setZoomValue])

return (
	<>
		<OrbitControls
			minDistance={earthRadius}
			maxDistance={earthRadius * 50}
			enablePan={false}
			zoomSpeed={1}
			ref={orbitCon}
		/>
		<PerspectiveCamera
			makeDefault
			fov={54}
			aspect={props.size.width/props.size.height}
			near={props.near}
			far={props.far}
			position={[15000, 0, -15000]} 
		/>
	</>
);

}
`

[michaelnicol]

Has anyone found a solution to this? Based on my research, I have yet to find a working example of React Three Fiber working with external React components, such as a UI bar.