{"_rev":"3-90ee80e03da83646b71ad824ec707c2f","time":{"created":"2026-01-08T11:48:36.670Z","modified":"2026-01-08T11:48:37.427Z","1.0.0":"2026-01-08T10:20:26.751Z","1.0.1":"2026-01-08T11:48:36.911Z"},"_id":"@3lens/react-bridge","name":"@3lens/react-bridge","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@3lens/react-bridge","version":"1.0.1","description":"React and React Three Fiber integration for 3Lens devtool","keywords":["three.js","threejs","react","react-three-fiber","r3f","devtools","debugging"],"homepage":"https://github.com/adriandarian/3Lens","repository":{"type":"git","url":"git+https://github.com/adriandarian/3Lens.git","directory":"packages/react-bridge"},"license":"MIT","author":{"name":"Adrian Darian","email":"adrian.the.hactus@gmail.com","url":"https://github.com/adriandarian"},"type":"module","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"main":"./dist/index.js","types":"./dist/index.d.ts","dependencies":{"@3lens/core":"1.0.1"},"devDependencies":{"@react-three/fiber":"^8.15.0","@testing-library/react":"^16.3.1","@types/react":"^18.2.0","jsdom":"^27.4.0","react":"^18.2.0","react-dom":"^18.2.0","three":"^0.160.0"},"peerDependencies":{"@react-three/fiber":">=8.0.0","react":">=17.0.0","three":">=0.150.0"},"peerDependenciesMeta":{"@react-three/fiber":{"optional":true}},"scripts":{"build":"vite build","dev":"vite build --watch","typecheck":"tsc --noEmit","clean":"rm -rf dist"},"_id":"@3lens/react-bridge@1.0.1","bugs":{"url":"https://github.com/adriandarian/3Lens/issues"},"_integrity":"sha512-fDKNJLtYpJt0fAYnsIxGtANLGAxs02zUwcJfQM9I2LYKypT/lk9zbd5w8E3rPhoTZN8jBml84UThPK6drBpPDg==","_resolved":"/tmp/076be461684475912e13515e47ede2b2/3lens-react-bridge-1.0.1.tgz","_from":"file:3lens-react-bridge-1.0.1.tgz","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-fDKNJLtYpJt0fAYnsIxGtANLGAxs02zUwcJfQM9I2LYKypT/lk9zbd5w8E3rPhoTZN8jBml84UThPK6drBpPDg==","shasum":"e4b138bac4d50b1b32c1195f3d2e7b23418a59c5","tarball":"https://registry.npmjs.org/@3lens/react-bridge/-/react-bridge-1.0.1.tgz","fileCount":24,"unpackedSize":145760,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@3lens%2freact-bridge@1.0.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCi7rR2JbX78sYj8LjusnZLpspikdZYyaLOe4wImunZzAIgEl8hhbscK2Yk+fTnHFmZeAqGKixQ2vPv5EpVOtDEI8k="}]},"_npmUser":{"name":"adriandarian","email":"adrian.the.hactus@gmail.com"},"directories":{},"maintainers":[{"name":"adriandarian","email":"adrian.the.hactus@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-bridge_1.0.1_1767872916772_0.2409874055306298"},"_hasShrinkwrap":false}},"maintainers":[{"name":"adriandarian","email":"adrian.the.hactus@gmail.com"}],"description":"React and React Three Fiber integration for 3Lens devtool","homepage":"https://github.com/adriandarian/3Lens","keywords":["three.js","threejs","react","react-three-fiber","r3f","devtools","debugging"],"repository":{"type":"git","url":"git+https://github.com/adriandarian/3Lens.git","directory":"packages/react-bridge"},"author":{"name":"Adrian Darian","email":"adrian.the.hactus@gmail.com","url":"https://github.com/adriandarian"},"bugs":{"url":"https://github.com/adriandarian/3Lens/issues"},"license":"MIT","readme":"# @3lens/react-bridge\n\nReact and React Three Fiber integration for 3Lens - the three.js devtool.\n\n## Installation\n\n```bash\nnpm install @3lens/react-bridge @3lens/core @3lens/overlay\n# or\npnpm add @3lens/react-bridge @3lens/core @3lens/overlay\n```\n\n## Quick Start\n\n### With React Three Fiber\n\n```tsx\nimport { Canvas, useThree, useFrame } from '@react-three/fiber';\nimport { ThreeLensProvider, createR3FConnector } from '@3lens/react-bridge';\nimport { createOverlay } from '@3lens/overlay';\n\n// Create the R3F connector with R3F's hooks\nconst ThreeLensR3F = createR3FConnector(useThree, useFrame);\n\nfunction App() {\n  return (\n    <ThreeLensProvider config={{ appName: 'My R3F App' }}>\n      <Canvas>\n        <ThreeLensR3F />\n        <ambientLight />\n        <mesh>\n          <boxGeometry />\n          <meshStandardMaterial color=\"orange\" />\n        </mesh>\n      </Canvas>\n    </ThreeLensProvider>\n  );\n}\n```\n\n### With Vanilla Three.js + React\n\n```tsx\nimport { ThreeLensProvider, useThreeLensProbe } from '@3lens/react-bridge';\nimport { useEffect, useRef } from 'react';\nimport * as THREE from 'three';\n\nfunction ThreeScene() {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const probe = useThreeLensProbe();\n\n  useEffect(() => {\n    const renderer = new THREE.WebGLRenderer();\n    const scene = new THREE.Scene();\n    const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);\n\n    // Connect 3Lens\n    probe.observeRenderer(renderer);\n    probe.observeScene(scene);\n\n    // Your scene setup...\n    containerRef.current?.appendChild(renderer.domElement);\n\n    return () => {\n      renderer.dispose();\n    };\n  }, [probe]);\n\n  return <div ref={containerRef} />;\n}\n\nfunction App() {\n  return (\n    <ThreeLensProvider config={{ appName: 'My App' }}>\n      <ThreeScene />\n    </ThreeLensProvider>\n  );\n}\n```\n\n## Hooks\n\n### `useThreeLensProbe()`\n\nAccess the probe instance directly.\n\n```tsx\nfunction MyComponent() {\n  const probe = useThreeLensProbe();\n\n  const handleSnapshot = () => {\n    const snapshot = probe.takeSnapshot();\n    console.log('Scene has', snapshot.root.children.length, 'objects');\n  };\n\n  return <button onClick={handleSnapshot}>Take Snapshot</button>;\n}\n```\n\n### `useSelectedObject()`\n\nAccess and manage the currently selected object.\n\n```tsx\nfunction SelectionPanel() {\n  const { selectedNode, hasSelection, clear } = useSelectedObject();\n\n  if (!hasSelection) {\n    return <div>Select an object in the scene</div>;\n  }\n\n  return (\n    <div>\n      <h3>{selectedNode?.ref.name || 'Unnamed'}</h3>\n      <p>Type: {selectedNode?.ref.type}</p>\n      <button onClick={clear}>Deselect</button>\n    </div>\n  );\n}\n```\n\n### `useMetric(extractor, options?)`\n\nExtract and track specific metrics from frame stats.\n\n```tsx\nfunction CustomMetric() {\n  const gpuTime = useMetric(\n    (stats) => stats.gpuTimeMs ?? 0,\n    { smoothed: true, smoothingSamples: 30 }\n  );\n\n  return <div>GPU Time: {gpuTime.current.toFixed(2)}ms</div>;\n}\n```\n\n### Convenience Metric Hooks\n\n```tsx\nfunction PerformanceHUD() {\n  const fps = useFPS(true);           // Smoothed FPS\n  const frameTime = useFrameTime();   // Frame time in ms\n  const drawCalls = useDrawCalls();   // Draw call count\n  const triangles = useTriangles();   // Triangle count\n  const gpuMem = useGPUMemory();      // GPU memory estimate\n\n  return (\n    <div className=\"hud\">\n      <div>FPS: {fps.current.toFixed(0)} (min: {fps.min.toFixed(0)})</div>\n      <div>Frame: {frameTime.current.toFixed(1)}ms</div>\n      <div>Draws: {drawCalls.current}</div>\n      <div>Tris: {(triangles.current / 1000).toFixed(1)}K</div>\n      <div>GPU: {(gpuMem.current / 1024 / 1024).toFixed(1)}MB</div>\n    </div>\n  );\n}\n```\n\n### `useDevtoolEntity(object, options)`\n\nRegister objects with meaningful names and metadata.\n\n```tsx\nfunction Player({ position }) {\n  const meshRef = useRef<THREE.Mesh>(null);\n\n  useDevtoolEntity(meshRef.current, {\n    name: 'Player',\n    module: 'game/entities',\n    metadata: { health: 100, level: 5 },\n    tags: ['player', 'controllable'],\n  });\n\n  return (\n    <mesh ref={meshRef} position={position}>\n      <boxGeometry />\n      <meshStandardMaterial color=\"blue\" />\n    </mesh>\n  );\n}\n```\n\n## API Reference\n\n### `<ThreeLensProvider>`\n\nMain provider component that initializes the probe.\n\n```tsx\n<ThreeLensProvider\n  config={{\n    appName: 'My App',\n    debug: false,\n    showOverlay: true,\n    toggleShortcut: 'ctrl+shift+d',\n  }}\n>\n  {children}\n</ThreeLensProvider>\n```\n\n### `createR3FConnector(useThree, useFrame)`\n\nCreates a connector component for React Three Fiber. Pass R3F's hooks to enable integration.\n\n```tsx\nimport { useThree, useFrame } from '@react-three/fiber';\nimport { createR3FConnector } from '@3lens/react-bridge';\n\nconst ThreeLensR3F = createR3FConnector(useThree, useFrame);\n```\n\n## TypeScript\n\nAll hooks and components are fully typed. Import types as needed:\n\n```tsx\nimport type {\n  ThreeLensContextValue,\n  MetricValue,\n  EntityOptions,\n  FrameStats,\n  SceneNode,\n} from '@3lens/react-bridge';\n```\n\n## License\n\nMIT\n\n","readmeFilename":"README.md"}