Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/HichamELBSI/react-native-body-highlighter
react-native-body-highlighter 💪
https://github.com/HichamELBSI/react-native-body-highlighter
Last synced: 3 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 (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2024-06-26T11:13:36.000Z (5 months ago)
- Last Synced: 2024-06-30T15:47:48.344Z (5 months ago)
- Language: TypeScript
- Homepage:
- Size: 2.51 MB
- Stars: 67
- Watchers: 4
- Forks: 26
- 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)
[](https://circleci.com/gh/HichamELBSI/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 from "react-native-body-highlighter";
export default function App() {
const [bodyPartSelected, setBodyPartSelected] = useState({
slug: "biceps",
intensity: 2,
});
const [isBackSideEnabled, setIsBackSideEnabled] = useState(false);
const [isMale, setIsMale] = useState(true);
const toggleSwitch = () =>
setIsBackSideEnabled((previousState) => !previousState);
const toggleGenderSwitch = () => setIsMale((previousState) => !previousState);
return (
setBodyPartSelected({ slug: e.slug, intensity: 2 })
}
gender={isMale ? "male" : "female"}
side={isBackSideEnabled ? "back" : "front"}
scale={1.7}
/>
Side ({isBackSideEnabled ? "Back" : "Front"})
Gender ({isMale ? "Male" : "Female"})
);
}
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",
},
});
```
## v3.X.X Props
| Prop | Required | Purpose |
| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------ |
| data | Yes | `BodyPartObject[]` - Array of `BodyPartObject` to highlight |
| onBodyPartPress | No | `Func` - (bodyPart: BodyPartObject) => {} Callback called when a user tap a body part |
| colors | No | `String[]` - Defaults to `['#0984e3', '#74b9ff']` |
| side | No | `string` - Can be "back" or "front", Defaults to `front` |
| gender | No | `string` - Can be "male" or "female", Defaults to `male` - :warning: Please consider `female` as a beta work in progress |
| scale | No | `Float` - Defaults to `1` |
## v2.X.X Props
| Prop | Required | Purpose |
| ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------- |
| data | Yes | (Array) Array of `BodyPartObject` to highlight |
| onMusclePress | No | (Func) (bodyPart: BodyPartObject) => {} Callback called when a user tap a body part, disabled if zoomOnPress is set to true |
| colors | No | (Array) Defaults to `['#0984e3', '#74b9ff']` |
| frontOnly | No | (Boolean) Display only the front, Defaults to `false` |
| backOnly | No | (Boolean) Display only the back, Defaults to `false` |
| zoomOnPress | No | (Boolean) Defaults to false |
| scale | No | (Float) Defaults to `1` |
## BodyPart object model
- #### BodyPartObject : `{ slug: BodyPartName, intensity: IntensityNumber }`
- #### 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)
## List of body parts
| BodyParts | v2 | v3 | Side |
| --------------- | ------------------ | ------------------ | ----- |
| trapezius | :white_check_mark: | :white_check_mark: | Both |
| triceps | :white_check_mark: | :white_check_mark: | Both |
| forearm | :white_check_mark: | :white_check_mark: | Both |
| obliques | :white_check_mark: | :white_check_mark: | Both |
| adductors | :white_check_mark: | :white_check_mark: | Both |
| calves | :white_check_mark: | :white_check_mark: | Both |
| head | :white_check_mark: | :white_check_mark: | Both |
| neck | :white_check_mark: | :white_check_mark: | Both |
| chest | :white_check_mark: | :white_check_mark: | Front |
| biceps | :white_check_mark: | :white_check_mark: | Front |
| abs  | :white_check_mark: | :white_check_mark: | Front |
| upper-back | :white_check_mark: | :white_check_mark: | Back |
| lower-back | :white_check_mark: | :white_check_mark: | Back |
| hamstring | :white_check_mark: | :white_check_mark: | Back |
| gluteal | :white_check_mark: | :white_check_mark: | Back |
| deltoids  | :x: | :white_check_mark: | Both |
| hands | :x: | :white_check_mark: | Both |
| feet | :x: | :white_check_mark: | Both |
| ankles | :x: | :white_check_mark: | Both |
| tibialis | :x: | :white_check_mark: | Both |
| adductor | :white_check_mark: | :x: | Both |
| front-deltoids | :white_check_mark: | :x: | Front |
| abductors | :white_check_mark: | :x: | Front |
| back-deltoids  | :white_check_mark: | :x: | Back |