This component will return a locationData object containing the coordinates as percentages, and a general body-part name (e.g. left hand, abdomen, face)

For a more responsive version, use lazarus-location-selector-v2

props: {
  onClickCancel: f() /* triggered by clicking "x" in upper-left corner */
  getLocationData: f() /* will store location data */
  sex: 'male' || 'female' /* defaults to 'male' */
  isOverlay: boolean /* shows instructions, location, and buttons when true */
  onChangeSelection: f() /* is passed ('body part', [x, y]) */
  isView2: boolean /* when true, zooms into area currently selected */
}

If props.isOverlay:

• buttons and text appear over the image (e.g. first 2 images above)

• onClickCancel is required for 'x' button in upper left corner to function

If !props.isOverlay:

• Only button to appear is the image flip button (e.g. 3rd image above)

• props.onChangeSelection is necessary to display the currently selected body part in parent element

• props.isView2 is necessary to zoom into selection

{
  Front: true,
  MoleCoordinates: [49, 44],
  MoleLocation: 'right arm',
  Time: 1624396481604,
}

Guide to publishing react component used for this build: https://levelup.gitconnected.com/publish-react-components-as-an-npm-package-7a671a2fb7f