@madup-inc/react-imagemarker
TypeScript icon, indicating that this package has built-in type declarations

0.0.13 • Public • Published

react-imagemarker

Made with create-react-library

NPM JavaScript Style Guide

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 🙂

License

MIT © Madup

/@madup-inc/react-imagemarker/

    Package Sidebar

    Install

    npm i @madup-inc/react-imagemarker

    Weekly Downloads

    7

    Version

    0.0.13

    License

    MIT

    Unpacked Size

    16.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • sngwon
    • keating529
    • madup-frontend