simple-body-highlighter-react
v1.0.7
Published
[](https://www.npmjs.com/package/simple-body-highlighter-react) [](https://www.npmjs.com/package/simple-body
Maintainers
kaladivoReadme
simple-body-highlighter-react
SVG body part highlighter for React web applications.
Based on react-native-body-highlighter by @HichamELBSI. This is a web-only version for React DOM.
Installation
npm install simple-body-highlighter-reactQuick Start
import { Body } from 'simple-body-highlighter-react';
function App() {
return (
<Body
data={[
{ slug: 'left-biceps', color: '#ff6b6b' },
{ slug: 'right-biceps', color: '#ff6b6b' },
]}
onClick={(slug) => console.log(`Clicked: ${slug}`)}
/>
);
}Interactive Example
import { useState } from 'react';
import { Body, BodyPartSlug } from 'simple-body-highlighter-react';
function App() {
const [selected, setSelected] = useState<BodyPartSlug[]>([]);
const handleClick = (slug: BodyPartSlug) => {
setSelected((prev) =>
prev.includes(slug) ? prev.filter((s) => s !== slug) : [...prev, slug]
);
};
return (
<div style={{ display: 'flex', gap: '2rem' }}>
<Body
data={selected.map((slug) => ({ slug, color: '#ff6b6b' }))}
onClick={handleClick}
gender="male"
side="front"
/>
<Body
data={selected.map((slug) => ({ slug, color: '#ff6b6b' }))}
onClick={handleClick}
gender="male"
side="back"
/>
</div>
);
}Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| data | BodyPartData[] | [] | Body parts to highlight |
| onClick | (slug: BodyPartSlug, event: React.MouseEvent) => void | - | Click handler |
| gender | 'male' \| 'female' | 'male' | Body model |
| side | 'front' \| 'back' | 'front' | View side |
| scale | number | 1 | Scale factor |
| border | string \| 'none' | '#dfdfdf' | Outline color |
| disabledParts | BodyPartSlug[] | [] | Disabled slugs (grayed out, non-interactive) |
| hiddenParts | BodyPartSlug[] | [] | Hidden slugs (not rendered) |
| defaultFill | string | '#3f3f3f' | Default color for non-highlighted parts |
Body Part Slugs
See BODY_PARTS.md for the complete list of 44 available slugs.
Bilateral muscles use left- and right- prefixes (e.g., left-biceps, right-biceps).
TypeScript
All types are exported for TypeScript users:
import type { BodyPartSlug, BodyPartData, ModelProps } from 'simple-body-highlighter-react';Accessibility
Body parts have ARIA labels and keyboard navigation (Tab + Enter/Space).