Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-image-mapper2

yj-ang61MIT0.0.3TypeScript support: included

React Component to highlight interactive zones in images

react, react-image-mapper, image mapper, image map

readme

react-image-mapper2

This repository is based on react-image-mapper. Written in Typescript and React FC with some bug fixes.

Installation

$ yarn add react-image-mapper2
# or
$ npm install react-image-mapper2

Usage

import { ImageMapper, ImageMapperProps } from 'react-image-mapper2';

<ImageMapper
  active
  width={500}
  src={'https://c1.staticflickr.com/5/4052/4503898393_303cfbc9fd_b.jpg'}
  map={{
    name: 'my-map',
    areas: [
      { shape: 'poly', coords: [25,33,27,300,128,240,128,94] },
      { shape: 'poly', coords: [219,118,220,210,283,210,284,119] },
      { shape: 'poly', coords: [381,241,383,94,462,53,457,282] },
      { shape: 'poly', coords: [245,285,290,285,274,239,249,238] },
    ]
  }}
/>

TODO

  • <input disabled="" type="checkbox"> Update README
  • <input disabled="" type="checkbox"> Write test