@madup-inc/react-imagemarker NPM

react-imagemarker

Made with create-react-library

Install

npm install --save @madup-inc/react-imagemarker

Usage

import React from 'react'
import ImageMarker from '@madup-inc/react-imagemarker'
import '@madup-inc/react-imagemarker/dist/index.css'

const markers = [
  {
    x: 20,
    y: 40,
    id: 1,
  },
  {
    x: 40,
    y: 40,
    id: 2,
  },
  {
    x: 70,
    y: 55,
    id: 3,
    render: () => <div style={{ fontSize: 30 }}>🙂</div>,
  },
]

const App = () => {
  return (
    <div style={{ width: 500, height: 500 }}>
      <ImageMarker
        src="https://lever.me/statics/image/introduce/Group16.svg"
        markers={markers}
        onImageClick={({ x, y }, clickEvent, wrapperDom) => {
          console.log({ x, y, clickEvent, wrapperDom })
        }}
      />
    </div>
  )
}

export default App

Output 🙂

npm.io