React component wrappers for @ts3d-hoops/ui-kit web components. This package provides React-friendly components that wrap the underlying Lit-based web components, giving you proper TypeScript support, React event handling, and seamless integration with yo
React component wrappers for @ts3d-hoops/ui-kit web components. This package provides React-friendly components that wrap the underlying Lit-based web components, giving you proper TypeScript support, React event handling, and seamless integration with your React applications.
- React 18+ compatible
- Full TypeScript support
- Proper React event handling
- Tree-shakable ES modules
- Built on @lit/react for optimal performance
``bash`
npm install @ts3d-hoops/ui-kit-react react
Note: React 18+ is required as a peer dependency.
`tsx
import React from 'react';
import { HoopsButton, HoopsLayout, HoopsIcon, HoopsSwitch } from '@ts3d-hoops/ui-kit-react';
function App() {
const [enabled, setEnabled] = React.useState(false);
return (
Start Viewer
Enable feature
);
}
`
All components are fully typed for TypeScript:
`tsx
import React from 'react';
import type { MouseEvent } from 'react';
import { HoopsButton } from '@ts3d-hoops/ui-kit-react';
interface Props {
onSave: () => void;
disabled?: boolean;
}
function SaveButton({ onSave, disabled = false }: Props) {
const handleClick = (event: MouseEvent
event.preventDefault();
onSave();
};
return (
Save
);
}
`
React events are properly mapped from the underlying web component events:
`tsx
// Switch component with proper React onChange
// e.target.checked is available
console.log('Switch toggled:', e.target.checked);
}}
/>
// Accordion with change events
console.log('Accordion changed:', e.detail);
}}
/>
`
Components inherit the same CSS custom properties as @ts3d-hoops/ui-kit:
`css`
:root {
--hoops-neutral-foreground: #ffffff;
--hoops-accent-foreground: #0078d4;
--hoops-body-font: 'Segoe UI', system-ui, sans-serif;
}
You can also style components using standard React patterns:
`tsx`
Styled Button
| Feature | @ts3d-hoops/ui-kit (Web Components) | @ts3d-hoops/ui-kit-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 |
| Tree shaking | ✅ | ✅ |
| Bundle size | Smaller | Slightly larger (+@lit/react) |
- 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
- React 18+
- Modern browsers with web component support
- ES2020+ environments
- Works with all major bundlers (Vite, Webpack, Create React App)
- @ts3d-hoops/ui-kit — The underlying web component library@ts3d-hoops/web-viewer-components-react
- — React wrappers for viewer-specific components@ts3d-hoops/web-viewer
- — The main HOOPS Web Viewer
If you're using @ts3d-hoops/ui-kit web components directly in React:
Before:
`tsx
// Manual JSX declarations needed
declare global {
namespace JSX {
interface IntrinsicElements {
'hoops-button': any;
}
}
}
`
After:
`tsx
import { HoopsButton } from '@ts3d-hoops/ui-kit-react';
``
Commercial license. For evaluation or production licensing, contact Tech Soft 3D.