Hooks
Read Klipp's state from your own components.
Hooks are React only. Elsewhere, read the same values from Klipp.
useIsActiveVirtualCamera
Whether the nearest <VirtualCamera> is the current winner. Turns true as soon as the blend into it starts.
function Hud() {
const isActive = useIsActiveVirtualCamera();
return isActive ? <Crosshair /> : null;
}
<VirtualCamera name="aim-down-sights" priority={20} active={aiming}>
<Hud />
</VirtualCamera>
useIsLiveVirtualCamera
Whether the nearest <VirtualCamera> is fully on screen. Turns true only once the blend into it has finished.
const isLive = useIsLiveVirtualCamera();
useVirtualCamera
The camera behind the nearest <VirtualCamera>, with its pieces and raw state. Mostly needed for custom pieces. It has the same members as any virtual camera.
const camera = useVirtualCamera();
camera.state; // the camera's raw state
useKlipp
The KlippThree behind the nearest <Klipp>, which knows about every camera. It has the same members as Klipp.
const klipp = useKlipp();
klipp.activeCameraName; // the current winner
klipp.liveCameraName; // the camera fully on screen
klipp.isBlending; // whether a blend is in progress