https://github.com/HichamELBSI/react-native-body-highlighter
react-native-body-highlighter 💪
https://github.com/HichamELBSI/react-native-body-highlighter
Last synced: 8 months ago
JSON representation
react-native-body-highlighter 💪
- Host: GitHub
- URL: https://github.com/HichamELBSI/react-native-body-highlighter
- Owner: HichamELBSI
- License: mit
- Created: 2019-01-27T00:29:08.000Z (over 6 years ago)
- Default Branch: main
- Last Pushed: 2024-08-22T13:32:30.000Z (11 months ago)
- Last Synced: 2024-08-22T15:14:38.380Z (11 months ago)
- Language: TypeScript
- Homepage:
- Size: 2.52 MB
- Stars: 69
- Watchers: 4
- Forks: 29
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-body-highlighter
[](https://www.npmjs.com/package/react-native-body-highlighter) [](https://www.npmjs.com/package/react-native-body-highlighter)
> SVG human body parts highlighter for react-native (Expo compatible).
## Installation
npm
```bash
$ npm install react-native-body-highlighter
```
yarn
```bash
$ yarn add react-native-body-highlighter
```
## Usage
### Basic example
```jsx
import { useState } from "react";
import Body from "react-native-body-highlighter";
export default function App() {
return (
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
```
Complete example
```jsx
import { StyleSheet, Switch, Text, View } from "react-native";
import { useState } from "react";
import Body, { ExtendedBodyPart } from "react-native-body-highlighter";
export default function App() {
const [selectedBodyPart, setSelectedBodyPart] =
useState <
ExtendedBodyPart >
{
slug: "biceps",
intensity: 2,
side: "right",
};
const [side, setSide] = (useState < "back") | ("front" > "front");
const [gender, setGender] = (useState < "male") | ("female" > "male");
const sideSwitch = () =>
setSide((previousState) => (previousState === "front" ? "back" : "front"));
const toggleGenderSwitch = () => {
setGender((previousState) =>
previousState === "male" ? "female" : "male"
);
};
return (
setSelectedBodyPart({ slug: e.slug, intensity: 2, side })
}
gender={gender}
side={side}
scale={1.7}
border="#dfdfdf"
/>
Side ({side})
Gender ({gender})
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
switchContainer: {
flexDirection: "row",
gap: 30,
},
switch: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});
```
## Props
| Prop | Required | Purpose |
| --------------- | -------- | ------------------------------------------------------------------------------------------------------------- |
| data | Yes | `BodyPartObject[]` - Array of `BodyPartObject` to highlight |
| onBodyPartPress | No | `Func` - `(bodyPart: BodyPartObject, side?: left \| right) => {}` Callback called when a user tap a body part |
| colors | No | `string[]` - Defaults to `['#0984e3', '#74b9ff']` |
| side | No | `front \| back` - Defaults to `front` |
| gender | No | `string` - Can be "male" or "female", Defaults to `male` |
| scale | No | `number` - Defaults to `1` |
| border | No | `string` - Defaults to `#dfdfdf` (`none` to hide the border) |
## BodyPart object model
- #### BodyPartObject: `{ slug: BodyPartName, intensity: IntensityNumber, side?: 'left' | 'right' }`
- #### BodyPartName: Body part name to highlight (See the list of available body parts below)
- #### IntensityNumber: Color intensity (if the `colors` property is set: from 1 to `colors.length` + 1. If not, intensity can be 1 or 2)
- #### Side (optional): Can be `left`, `right`. Useful for selecting a single part or a pair (Do not set the side if you need to select the pair)
## List of body parts
| BodyParts | Side |
| ------------ | ---------------------------- |
| trapezius | Both |
| triceps | Both |
| forearm | Both |
| adductors | Both |
| calves | Both |
| hair | Both |
| neck | Both |
| deltoids  | Both |
| hands | Both |
| feet | Both |
| head | Both (Front only for female) |
| ankles | Both (Front only for female) |
| tibialis | Front |
| obliques | Front |
| chest | Front |
| biceps | Front |
| abs  | Front |
| quadriceps  | Front |
| knees  | Front |
| upper-back | Back |
| lower-back | Back |
| hamstring | Back |
| gluteal | Back |