react-body-highlighter

This package was created to have a body highlighter component compatible with React.js with minimal dependencies and some extra props for further functionality. The SVG polygons were leveraged from the React Native package react-native-body-highlighter.

Installation

$ npm install react-body-highlighter

$ yarn add react-body-highlighter

Usage

Example (version 2+):

import React from 'react';
import Model, { IExerciseData, IMuscleStats } from 'react-body-highlighter';

export default function Component() {
  const data: IExerciseData[] = [
    { name: 'Bench Press', muscles: ['chest', 'triceps', 'front-deltoids'] },
    { name: 'Push Ups', muscles: ['chest'] },
  ];
  
  const handleClick = React.useCallback(({ muscle, data }: IMuscleStats) => {
    const { exercises, frequency } = data;

    alert(`You clicked the ${muscle}! You've worked out this muscle ${frequency} times through the following exercises: ${JSON.stringify(exercises)}`)

  }, [data]);

  return (
    <Model
      data={data}
      style={{ width: '20rem', padding: '5rem' }}
      onClick={handleClick}
    />
  );
}

Example (version 1.5): https://codesandbox.io/s/condescending-leaf-qsp4m?file=/src/App.tsx

Props

All props are optional so if they are not passed to the component, they will fallback to default values or be undefined.

List of muscles/parts supported

/* Back */
trapezius
upper-back
lower-back

/* Chest */
chest

/* Arms */
biceps
triceps
forearm
back-deltoids
front-deltoids

/* Abs */
abs
obliques

/* Legs */
adductor
hamstring
quadriceps
abductors
calves
gluteal

/* Head */
head
neck

Modifying

The main SVG element has a class name .rbh which will allow you to manually change any styles necessary.

For example, you can add something like .rhb polygon:hover { fill: #757782 !important; } to your .css file to change the muscle color on mouse hover.

Otherwise, feel free to fork the repo and make any adjustments to your liking!