React-ImgBox

React version of jQuery-Imgbox
Project page.
Use x and y co-ordinates with width and height.

<ImgBox
  id="family" className="img-fluid" name="family"
  src="img/family.jpg"

  x="47" y="288" w="380" h="523"
  markStyle={{ 'border': '4px solid red' }}
/>
Use coordinates x,y and x2,y2 with a css class to define the marker&aposs look.

<ImgBox
  id="frightfest" className="img-fluid"
  src="img/frightfest.jpg"

  x="483" y="405" x2="932" y2="1038" markClass="frightfest_style"
/>
Wrap your image in anything like an anchor link.

const markStyle = {
  backgroundColor: 'white',
  opacity: '0.2',
  border: '4px dotted white'
}


<a href="README.md" id="quantel_example">
  <ImgBox
    id="quantel" className="img-fluid"
    src="img/quantel.jpg"

    x="1395" y="246" w="638" h="763" markStyle={markStyle}
  />
</a>
Use with clickables, like alerts, to your IMG in the normal way.

const markStyle = {
  border: '5px dashed cyan'
}


const doClick = (e) => {
  alert('David is Ace!')
}


<ImgBox
  id="youth_hosteling" className="img-fluid"
  src="img/youth_hosteling.jpg"

  x="298" y="455" x2="682" y2="900" markStyle={markStyle}
  onClick={doClick}
/>
Adjust either of the boxes. Click once to start drawing, click again to save.
If your initial point is wrong, you can move the pointer up and right to move the inital point.
.jack_pub_style {
  background-color: black;
  opacity: 0.4;
  border: 4px solid yellow;
}


const [myCoords, setMyCoords] =
  useState({x:1050, y:688, x2:1732, y2:1563, w:682, h:875})
const [myCoordString, setMyCoordString] =
  useState('')

const saveMyCoords = (coords) => {
  setMyCoords(coords)
  setMyCoordString(JSON.stringify(myCoords))
}


<ImgBox
  id="jack_pub_big" {...myCoords} className="img-fluid"
  src="img/jack_pub.jpg"
  defaultSettings={{
    edit: true,
    saveBox: saveMyCoords,
    markClass: 'jack_pub_style'
  }}
/>


<ImgBox
  id="jack_pub_small" {...myCoords} className="img-fluid"
  edit={true} saveBox={saveMyCoords}
  markStyle={{ 'border': '2px solid blue' }}
  src="img/jack_pub.jpg"
/>


<input
  id="jack_pub_out" type="text" placeholder="Redraw the box around the barman in both pictures"
  readOnly={true} style={{ width: '100%' }}
  value={myCoordString}
/>