@jpedro002/react-body-highlighter/dist/index.d.ts

React.js component for highlighting muscles on a body model

import { CSSProperties } from 'react';
import * as _types_react from '@types/react';

declare const MuscleType: {
    readonly TRAPEZIUS: "trapezius";
    readonly UPPER_BACK: "upper-back";
    readonly LOWER_BACK: "lower-back";
    readonly CHEST: "chest";
    readonly BICEPS: "biceps";
    readonly TRICEPS: "triceps";
    readonly FOREARM: "forearm";
    readonly BACK_DELTOIDS: "back-deltoids";
    readonly FRONT_DELTOIDS: "front-deltoids";
    readonly ABS: "abs";
    readonly OBLIQUES: "obliques";
    readonly ABDUCTOR: "adductor";
    readonly ABDUCTORS: "abductors";
    readonly HAMSTRING: "hamstring";
    readonly QUADRICEPS: "quadriceps";
    readonly CALVES: "calves";
    readonly GLUTEAL: "gluteal";
    readonly HEAD: "head";
    readonly NECK: "neck";
    readonly KNEES: "knees";
    readonly LEFT_SOLEUS: "left-soleus";
    readonly RIGHT_SOLEUS: "right-soleus";
    readonly LEFT_HAND: "left-hand";
    readonly RIGHT_HAND: "right-hand";
    readonly LEFT_FOOT: "left-foot";
    readonly RIGHT_FOOT: "right-foot";
    readonly LEFT_EAR: "left-ear";
    readonly RIGHT_EAR: "right-ear";
};
type Muscle = (typeof MuscleType)[keyof typeof MuscleType];
declare const ModelType: {
    readonly POSTERIOR: "posterior";
    readonly ANTERIOR: "anterior";
};
type ModelType = (typeof ModelType)[keyof typeof ModelType];
interface IExerciseData {
    name: string;
    muscles: Muscle[];
    frequency?: number;
}
interface IMuscleData {
    exercises: string[];
    frequency: number;
}
interface IMuscleStats {
    muscle: Muscle;
    data: IMuscleData;
}
interface IModelProps {
    bodyColor?: string;
    data?: IExerciseData[];
    highlightedColors?: string[];
    onClick?: ((exercise: IMuscleStats) => void) | (() => void);
    style?: CSSProperties;
    svgStyle?: CSSProperties;
    type?: ModelType;
    showHands?: boolean;
    showFeet?: boolean;
    showEars?: boolean;
}

/**
 * Component which displays an interactive model of a human body. Accepts many optional props for manipulating functionality or visuals of the component.
 *
 * @param data Array containing exercise objects with muscle targeting data
 * @param bodyColor Default color of body model (with no muscles worked) - defaults to '#B6BDC3'
 * @param highlightedColors Array containing colors to display depending on frequency muscle is worked (where array index = frequency - 1) - defaults to ['#0984e3', '#74b9ff']
 * @param onClick Callback function when a muscle is clicked (returns back object with muscle-related data)
 * @param svgStyle Style object that gets passed to SVG element
 * @param style Style object that gets passed to SVG parent wrapper (div)
 * @param type Denotes type of model view - 'anterior' (front) or 'posterior' (back) - defaults to 'anterior'
 * @param showHands Controls visibility of hands (left and right) - defaults to false
 * @param showFeet Controls visibility of feet (left and right) - defaults to false
 * @param showEars Controls visibility of ears (left and right) - defaults to false
 *
 * @component
 * @example
 * // Basic usage with exercise data
 * const data = [{ name: 'Bench Press', muscles: ['chest', 'triceps', 'front-deltoids'] }]
 * return (
 *   <Model type="posterior" data={data} />
 * )
 *
 * @example
 * // Interactive model with click handling and additional body parts
 * const handleMuscleClick = ({ muscle, data }) => {
 *   console.log(`Clicked ${muscle}:`, data);
 * };
 *
 * return (
 *   <Model
 *     data={workoutData}
 *     onClick={handleMuscleClick}
 *     showHands={true}
 *     showFeet={true}
 *     showEars={true}
 *     bodyColor="#f0f0f0"
 *     highlightedColors={['#ff6b6b', '#feca57']}
 *     style={{ width: '300px', height: '600px' }}
 *   />
 * )
 */
declare const _default: _types_react.NamedExoticComponent<IModelProps>;

export { type IExerciseData, type IModelProps, type IMuscleData, type IMuscleStats, ModelType, type Muscle, MuscleType, _default as default };