React Body Map SDK

Interactive SVG human body map React component with multi-language support. Perfect for medical, fitness, and health applications.

Features

• 🎨 Interactive SVG body map with anterior and posterior views
• 🌍 Multi-language support (English, French, German, Spanish, Italian, Dutch)
• ⚡ Fully customizable colors, labels, and behavior
• 🎯 Controlled & uncontrolled modes
• 📱 Responsive and touch-friendly
• 🪶 Lightweight with zero dependencies (except React)
• 💪 TypeScript-ready (types coming soon)

Installation

npm install react-body-map-sdk

Quick Start

import { BodyMap } from 'react-body-map-sdk';
import 'react-body-map-sdk/styles';

function App() {
  const handleSelect = (id, part) => {
    console.log('Selected:', part.name);
  };

  return (
    <BodyMap
      lang="en"
      onSelect={handleSelect}
    />
  );
}

Props API

BodyMap Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | lang | string | "en" | Language code: "en", "fr", "de", "es", "it", "nl" | | selectedPartId | number \| null | undefined | Controlled selected part ID | | onSelect | (id: number, part: object) => void | undefined | Callback when a part is clicked | | colors | object | See below | Color configuration | | showHeader | boolean | true | Show/hide header with language selector | | showSideLabels | boolean | true | Show/hide anterior/posterior labels | | showLanguageSelector | boolean | true | Show/hide language selector | | onLanguageChange | (lang: string) => void | undefined | Callback when language changes | | className | string | "" | Additional CSS class | | style | object | {} | Additional inline styles |

Colors Object

{
  default: "rgb(75, 75, 77)",    // Default part color
  hover: "rgb(85, 85, 87)",      // Hover state color
  selected: "rgb(255, 59, 48)"   // Selected state color
}

Usage Examples

Controlled Mode

import { useState } from 'react';
import { BodyMap } from 'react-body-map-sdk';

function ControlledExample() {
  const [selectedId, setSelectedId] = useState(null);
  const [language, setLanguage] = useState('en');

  return (
    <BodyMap
      lang={language}
      selectedPartId={selectedId}
      onSelect={(id, part) => {
        setSelectedId(id);
        console.log('Selected:', part.name);
      }}
      onLanguageChange={setLanguage}
    />
  );
}

Custom Colors

<BodyMap
  colors={{
    default: "#2c3e50",
    hover: "#34495e",
    selected: "#e74c3c"
  }}
/>

Minimal UI (No Header)

<BodyMap
  showHeader={false}
  showSideLabels={false}
  lang="fr"
/>

Using Data Utilities

import { getBodyParts, translations, SUPPORTED_LANGS } from 'react-body-map-sdk';

// Get body parts for a specific language
const parts = getBodyParts('en');
// [{ id: 0, name: 'Right pectoral', face: 'ant', d: '...' }, ...]

// Access translations
console.log(translations.en[0]); // "Click on the body!"

// Get all supported languages
console.log(SUPPORTED_LANGS); // ["en", "fr", "de", "es", "it", "nl"]

Body Part Object Structure

Each body part has the following structure:

{
  id: 0,                          // Unique identifier
  name: "Right pectoral",         // Localized name
  face: "ant",                    // "ant" (anterior) or "post" (posterior)
  d: "M129.9 225a39.6..."        // SVG path data
}

Styling

Import the default styles:

import 'react-body-map-sdk/styles';

Or create your own by targeting these CSS classes:

• .bodymap-wrapper - Main container
• .bodymap-header - Header section
• .bodymap-select - Language selector
• .bodymap-bodies - Body views container
• .bodymap-side - Individual side (anterior/posterior)
• .bodymap-side-label - Side labels
• .bodymap-container - SVG container
• .bodymap-part - Individual body part path

Supported Languages

• 🇬🇧 English (en)
• 🇫🇷 French (fr)
• 🇩🇪 German (de)
• 🇪🇸 Spanish (es)
• 🇮🇹 Italian (it)
• 🇳🇱 Dutch (nl)

Browser Support

Works in all modern browsers that support:

• React 17+
• SVG
• ES6+

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Credits

Original body map SVG design and concept.