Current State
HoveredNone
SelectedNone
Visible organs23 / 23
Organ Controls
Example.tsx
import { HpoVisualizer } from 'hpo-react-visualizer';
// Basic usage with visible organs
<HpoVisualizer
visibleOrgans={['heart', 'lung', 'digestive']}
onSelect={(id) => console.log('Selected:', id)}
/>
// With external state control
<HpoVisualizer
organs={[
{ id: 'heart', colorName: 'blue' },
{ id: 'lung', colorName: 'yellow', showOutline: true },
]}
selectedOrgan={selectedOrgan}
hoveredOrgan={hoveredOrgan}
onSelect={setSelectedOrgan}
onHover={setHoveredOrgan}
/>