react-anatomy-picker

A React component for selecting anatomical regions on a human body diagram.

📦 Installation

npm install react-anatomy-picker
# or
yarn add react-anatomy-picker
# or
pnpm add react-anatomy-picker

Usage Example

import { AnatomyPicker, AdultMaleFront } from "react-anatomy-picker";
import { useState } from "react";

export default function Demo() {
  const [selected, setSelected] = useState<string[]>([]);

  return (
    <AnatomyPicker
      SvgComponent={AdultMaleFront}
      selected={selected}
      highlightColor="#1471C9"
      onPartSelect={(part) =>
        setSelected((prev) =>
          prev.includes(part)
            ? prev.filter((p) => p !== part)
            : [...prev, part]
        )
      }
      style={{ width: 400 }}
    />
  );
}

🔥 Features

• 🎨 Interactive SVG-based anatomy selection
• 🧍 Supports various anatomy types:
  • Adult Male (Front / Back)
  • Adult Female (Front / Back)
  • Child (Male/Female)
  • Toddler (Front/Back)
  • Infant
• 🖱️ Hover + Click highlight
• 🎯 Multi-select support (selected: string[])
• ♿ Accessible with aria-selected
• 🎛️ Custom highlight color
• ⚡ Tiny bundle & tree-shakeable
• 🧩 Fully written in TypeScript

Anatomy Models

Development

• Install dependencies:

npm install

• Run the playground:

npm run play

• Run the unit tests:

npm run test

• Build the library:

npm run build