react-body-map
v1.1.0
Published
A versatile and interactive body highlighter component for React and Next.js applications. Allows for easy selection, highlighting, and annotation of body parts.
Maintainers
hashangitReadme
React Body Map
A versatile and interactive body map component for React and Next.js applications. Allows for easy selection, highlighting, and annotation of body parts.
Features
- Interactive Body Map: Click to select and deselect body parts.
- Front and Back Views: Easily toggle between front and back views of the body.
- Customizable Colors: Define your own color scheme for different intensity levels.
- Scalable: Zoom in and out of the body map.
- TypeScript Support: Fully typed for a better development experience.
Installation
pnpm add react-body-mapUsage
Here's a simple example of how to use the Body component:
import React, { useState } from 'react';
import { Body, BodyPart, Slug } from 'react-body-map';
const App = () => {
const [selectedParts, setSelectedParts] = useState<BodyPart[]>([]);
const handlePartClick = (part: { slug: Slug; intensity?: number }) => {
const { slug } = part;
const newSelectedParts = [...selectedParts];
const existingPartIndex = newSelectedParts.findIndex((p) => p.slug === slug);
if (existingPartIndex !== -1) {
// Deselect part
newSelectedParts.splice(existingPartIndex, 1);
} else {
// Select part
newSelectedParts.push({ slug, intensity: 1 });
}
setSelectedParts(newSelectedParts);
};
return (
<div>
<Body
parts={selectedParts}
onPartPress={handlePartClick}
/>
</div>
);
};
export default App;For a more advanced example with a notes UI, intensity selection, and more, please see the example directory in the repository.
Props
| Prop | Required | Type | Description |
| ------------- | -------- | ---------------------------------------- | ------------------------------------------------------------------------------------------ |
| parts | Yes | BodyPart[] | An array of BodyPart objects to highlight. |
| onPartPress | No | (bodyPart: BodyPart) => void | A callback function that is triggered when a body part is clicked. |
| colors | No | string[] | An array of colors to use for different intensity levels. Defaults to a four-color scheme. |
| side | No | 'front' │ 'back' | The side of the body to display. Defaults to 'front'. |
| scale | No | number | The scale of the SVG. Defaults to 1. |
| frontOnly | No | boolean | If true, only the front view will be displayed. |
| backOnly | No | boolean | If true, only the back view will be displayed. |
BodyPart Object
The BodyPart object has the following structure:
slug: The name of the body part to highlight.intensity: A number from 1 tocolors.lengththat determines which color to use.
A full list of available body parts can be found in bodyFront.ts and bodyBack.ts.
License
This project is licensed under the MIT License.