{/ Right panel /}


);
}
`

$3

`tsx
import React from 'react';
import { WebViewerComponent, HoopsModelTree } from '@ts3d-hoops/web-viewer-components-react';

function EventExample() {
// Viewer events
const handleSceneReady = () => {
console.log('Viewer is ready!');
};

const handleSelectionChange = (e: CustomEvent) => {
console.log('Selection changed:', e.detail);
};

const handleModelLoadBegin = () => {
console.log('Model loading started...');
};

// Tree events
const handleModelTreeClick = (e: CustomEvent) => {
const { nodeId, nodeName } = e.detail;
console.log(Clicked node: ${nodeName} (${nodeId}));
};

const handleVisibilityChange = (e: CustomEvent) => {
const { nodeId, visible } = e.detail;
console.log(Node ${nodeId} visibility: ${visible});
};

return (
endpointUri="/models/sample.scs"
onHwvSceneReady={handleSceneReady}
onHwvSelectionArray={handleSelectionChange}
onHwvModelLoadBegin={handleModelLoadBegin}
style={{ width: '100%', height: '500px' }}
>
slot="sidebar"
onModelTreeNodeClick={handleModelTreeClick}
onModelTreeNodeVisibilityChange={handleVisibilityChange}
style={{ width: '300px' }}
/>

);
}
`

$3

`tsx
import React, { useEffect, useState } from 'react';
import { WebViewerComponent } from '@ts3d-hoops/web-viewer-components-react';
import {
CameraService,
SelectionService,
serviceRegistry,
} from '@ts3d-hoops/web-viewer-components/services';

function ServiceIntegration() {
const [cameraService, setCameraService] = useState(null);
const [selectionService, setSelectionService] = useState(null);

useEffect(() => {
// Get services after viewer is ready
const camera = serviceRegistry.get(CameraService);
const selection = serviceRegistry.get(SelectionService);

setCameraService(camera);
setSelectionService(selection);
}, []);

const fitView = async () => {
if (cameraService) {
await cameraService.fitView();
}
};

const clearSelection = async () => {
if (selectionService) {
await selectionService.clear();
}
};

return (


`tsx
import React, { useEffect, useState } from 'react';
import { WebViewerComponent } from '@ts3d-hoops/web-viewer-components-react';

// Custom hook for viewer state
function useViewerState() {
const [isReady, setIsReady] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [selection, setSelection] = useState([]);

const handleSceneReady = () => setIsReady(true);
const handleLoadBegin = () => setIsLoading(true);
const handleLoadEnd = () => setIsLoading(false);
const handleSelection = (e: CustomEvent) => setSelection(e.detail);

return {
isReady,
isLoading,
selection,
events: {
onHwvSceneReady: handleSceneReady,
onHwvModelLoadBegin: handleLoadBegin,
onHwvFirstModelLoaded: handleLoadEnd,
onHwvSelectionArray: handleSelection,
},
};
}

function ViewerWithHook() {
const { isReady, isLoading, selection, events } = useViewerState();

return (


- onHwvReady — Viewer initialization complete
- onHwvSceneReady — Scene and model ready for interaction
- onHwvFirstModelLoaded — First model loaded successfully

$3

- onHwvModelLoadBegin — Model loading started
- onHwvModelStructureReady — Model structure parsed
- onHwvModelSwitched — Model switched in multi-model scenarios

$3

- onHwvSelectionArray — Selection changed
- onHwvBeginInteraction — User interaction started
- onHwvEndInteraction — User interaction ended
- onHwvCamera — Camera changed
- onHwvContextMenu — Right-click context menu

$3

- onHwvViewCreated — View created
- onHwvViewLoaded — View loaded
- onHwvViewOrientation — View orientation changed

$3

- onHwvMeasurementCreated — Measurement created
- onHwvMeasurementDeleted — Measurement deleted
- onHwvRedlineCreated — Redline markup created

$3

- onHwvModelLoadFailure — Model failed to load
- onHwvTimeout — Operation timeout
- onHwvWebGlContextLost — WebGL context lost

TypeScript support

All components are fully typed for TypeScript with proper event interfaces:

`tsx
import React from 'react';
import type { CustomEvent } from 'react';
import { WebViewerComponent, HoopsModelTree } from '@ts3d-hoops/web-viewer-components-react';

interface ViewerProps {
modelUrl: string;
onReady?: () => void;
}

function TypedViewer({ modelUrl, onReady }: ViewerProps) {
const handleModelTreeClick = (e: CustomEvent) => {
// e.detail is properly typed
const { nodeId, nodeName } = e.detail;
console.log(Clicked: ${nodeName});
};

return (
endpointUri={modelUrl}
onHwvSceneReady={onReady}
style={{ width: '100%', height: '500px' }}
>


);
}
`

Comparison with vanilla web components

| Feature | @ts3d-hoops/web-viewer-components | @ts3d-hoops/web-viewer-components-react |
| ----------------- | --------------------------------- | --------------------------------------- |
| React integration | Manual JSX declarations needed | Native React components |
| TypeScript | Generic web component types | Full React component types |
| Event handling | DOM events only | React SyntheticEvents + Custom Events |
| Props | Attributes only | React props + attributes |
| Tree shaking | ✅ | ✅ |
| Bundle size | Smaller | Slightly larger (+@lit/react) |

Performance

- Built on @lit/react for optimal React integration
- Components are lazy-loaded and tree-shakable
- No unnecessary re-renders thanks to Lit's efficient change detection
- Minimal overhead over vanilla web components

Browser support

- React 18+
- Modern browsers with web component support
- WebGL-capable devices
- ES2020+ environments
- Works with all major bundlers (Vite, Webpack, Create React App)

Related packages

- @ts3d-hoops/web-viewer-components — The underlying web component library
- @ts3d-hoops/web-viewer — Core HOOPS Web Viewer library
- @ts3d-hoops/ui-kit-react — React wrappers for base UI components
- @ts3d-hoops/streamcache — Low-level streaming client

Migration from @ts3d-hoops/web-viewer-components

If you're using @ts3d-hoops/web-viewer-components web components directly in React:

Before:

`tsx
// Manual JSX declarations needed
declare global {
namespace JSX {
interface IntrinsicElements {
'hoops-web-viewer': any;
'hoops-model-tree': any;
}
}
}



;
`

After:

`tsx
import { WebViewerComponent, HoopsModelTree } from '@ts3d-hoops/web-viewer-components-react';



;
``

License

Commercial license. For evaluation or production licensing, contact Tech Soft 3D.