react-body-selector

v1.0.2

Published

a month ago

A React component library for interactive body part selection with customizable intensity levels

0High
0Medium
0Low

guillaume-mrlin

react body anatomy selector muscles interactive svg component

React Body Selector

A customizable React component library for interactive body part selection with intensity levels. Perfect for fitness apps, medical applications, pain tracking, and workout planning.

Features

Interactive SVG-based body visualization
Male and female body models
Front and back views
Customizable color schemes
Intensity levels (1-3) for each body part
Click to select/deselect body parts
TypeScript support with full type definitions
Zero dependencies (only React peer dependency)
Lightweight and performant

Installation

npm install react-body-selector

yarn add react-body-selector

pnpm add react-body-selector

Basic Usage

import { useState } from 'react';
import { Body, ExtendedBodyPart } from 'react-body-selector';

function App() {
  const [selectedParts, setSelectedParts] = useState<ExtendedBodyPart[]>([]);

  const handleBodyPartPress = (bodyPart: ExtendedBodyPart) => {
    const exists = selectedParts.find(p => p.slug === bodyPart.slug);

    if (exists) {
      setSelectedParts(selectedParts.filter(p => p.slug !== bodyPart.slug));
    } else {
      setSelectedParts([
        ...selectedParts,
        { slug: bodyPart.slug, intensity: 2 }
      ]);
    }
  };

  return (
    <Body
      data={selectedParts}
      gender="male"
      side="front"
      scale={1.5}
      onBodyPartPress={handleBodyPartPress}
    />
  );
}

Props

Body Component

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | ExtendedBodyPart[] | [] | Array of selected body parts with intensity levels | | gender | "male" \| "female" | "male" | Body model to display | | side | "front" \| "back" | "front" | View to display | | scale | number | 1 | Scale factor for the body visualization | | colors | string[] | ["#0984e3", "#74b9ff", "#a29bfe"] | Array of 3 colors for intensity levels (1-3) | | border | string | "#dfe6e9" | Border color for body parts | | onBodyPartPress | (bodyPart: ExtendedBodyPart, side?: "left" \| "right") => void | - | Callback when a body part is clicked |

Types

ExtendedBodyPart

interface ExtendedBodyPart {
  slug: Slug;
  intensity?: number;
  side?: "left" | "right";
}

Slug (Body Parts)

Available body part identifiers:

abs - Abdominals
adductors - Adductors
ankles - Ankles
biceps - Biceps
calves - Calves
chest - Chest
deltoids - Shoulders
feet - Feet
forearm - Forearms
gluteal - Glutes
hamstring - Hamstrings
hands - Hands
head - Head
knees - Knees
lower-back - Lower Back
neck - Neck
obliques - Obliques
quadriceps - Quadriceps
tibialis - Tibialis
trapezius - Trapezius
triceps - Triceps
upper-back - Upper Back

Advanced Usage

Custom Colors

<Body
  data={selectedParts}
  colors={["#93c5fd", "#3b82f6", "#1d4ed8"]}
  border="#cbd5e1"
/>

Handling Side-Specific Selection

const handleBodyPartPress = (bodyPart: ExtendedBodyPart, side?: "left" | "right") => {
  if (side) {
    // Handle left/right specific selection
    setSelectedParts([
      ...selectedParts,
      { slug: bodyPart.slug, intensity: 2, side }
    ]);
  } else {
    // Handle symmetric selection (both sides)
    setSelectedParts([
      ...selectedParts,
      { slug: bodyPart.slug, intensity: 2 }
    ]);
  }
};

Dynamic Intensity Updates

const updateIntensity = (slug: Slug, intensity: number) => {
  setSelectedParts(selectedParts.map(part =>
    part.slug === slug ? { ...part, intensity } : part
  ));
};

// Usage with slider
<input
  type="range"
  min="1"
  max="3"
  value={part.intensity || 1}
  onChange={(e) => updateIntensity(part.slug!, parseInt(e.target.value))}
/>

Example: Full-Featured App

Check out the demo folder in the repository for a complete example with:

Gender toggle
Front/back view switching
Selected parts panel
Intensity sliders
Clear all functionality

Development

Running the Demo

npm install
npm run dev

Building the Library

npm run build:lib

Type Checking

npm run typecheck

Browser Support

Works in all modern browsers that support:

ES6+
React 18+
SVG rendering

License

MIT

Contributing

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

Credits

SVG body models adapted and enhanced for interactive use.