@ue-too/board-react-adapter / index / useBoardCameraState

函式: useBoardCameraState()

useBoardCameraState<K>(state): CameraState[K]

定義於: hooks/useBoardify.tsx:68

Hook to subscribe to a specific camera state property with automatic re-rendering.

型別參數

K

K extends keyof CameraState

Key of the camera state to subscribe to

參數

state

K

The camera state property to track ("position", "rotation", or "zoomLevel")

回傳

CameraState[K]

The current value of the specified camera state property

備註

This hook uses React's useSyncExternalStore to efficiently subscribe to camera state changes. It only triggers re-renders when the specified property actually changes, and uses caching to maintain referential equality for object values (like position).

Performance: The hook is optimized to prevent unnecessary re-renders by:

• Caching object values (position) to maintain referential equality
• Using useSyncExternalStore for efficient subscription management
• Only subscribing to the specific state property needed

範例

function CameraInfo() {
  const position = useBoardCameraState('position');
  const rotation = useBoardCameraState('rotation');
  const zoomLevel = useBoardCameraState('zoomLevel');

  return (
    <div>
      Position: {position.x}, {position.y}<br/>
      Rotation: {rotation}<br/>
      Zoom: {zoomLevel}
    </div>
  );
}

參閱

useAllBoardCameraState for subscribing to all camera state at once