React Img Mapper Extended

React Component to highlight interactive zones in images

This repository is based on react-img-mapper but with some enhancements

1. Promise to be maintained this repository        
2. Built in TypeScript
3. Decreased size of bundled
4. Awesome Documentation        
5. Selected area will stay highlighted ( Single & Multiple ) with toggle and reset feature
6. New Properties: Natural Dimensions, RerenderProps       
7. Image Reference in Width, Height and onLoad function to access image properties  
8. Responsive Image Mapper   
9. Compatible with Next.js        

Installation

Package: react-img-mapper-extended

NPM

npm install react-img-mapper-extended --save        

Yarn

yarn add react-img-mapper-extended

Demo & Examples

Live demo: demo

Then open localhost:3000 in a browser.

If you want to change something and want to make a build file, you just need to run npm run build

Usage

Import the component as you normally do, and add it wherever you like in your JSX views as below:

import React from 'react';
import ImageMapper from 'react-img-mapper';

const Mapper = props => {
  const URL = 'https://raw.githubusercontent.com/img-mapper/react-docs/master/src/assets/example.jpg';
  const MAP = {
    name: 'my-map',
    // GET JSON FROM BELOW URL AS AN EXAMPLE
    areas: 'https://raw.githubusercontent.com/img-mapper/react-docs/master/src/assets/example.json',
  };
  
  return <ImageMapper src={URL} map={MAP} />
}

export default Mapper;

Properties

Props	Type	Description	Default
src	string	Image source url	required
map	string	Mapping description	{ name: generated, areas: [ ] }
containerRef	ref	help to reset selected highlighted area	null
areaKeyName	string	default unique key name ( required for stayHighlighted )	id
fillColor	string	Fill color of the highlighted zone	rgba(255, 255, 255, 0.5)
strokeColor	string	Border color of the highlighted zone	rgba(0, 0, 0, 0.5)
lineWidth	number	Border thickness of the highlighted zone	1
width	number | func	Image width, in function you will get image reference object	0
height	number | func	Image height, in function you will get image reference object	0
active	bool	Enable/Disable highlighting	true
disabled	bool	Enable/Disable area listeners and highlighting	false
imgWidth	number	Original image width	0
natural	bool	Give the original dimensions ( height & width ) to canvas and image wrapper	false
stayHighlighted	bool	You can see the highlighted area after clicking on the particular area	false
stayMultiHighlighted	bool	You can see the multiple highlighted area after clicking on the particular area	false
toggleHighlighted	bool	You can toggle selected highlighted area	false
rerenderProps	array	specify rerenderProps property, if you want to rerender your map with different property	[]
responsive	bool	responsive map in all resolution ( for enable it you need to specify parentWidth )	false
parentWidth	number	parent max width for responsive	0

Properties Callback

Props callbacks	Called on	signature
onLoad	Image loading and canvas initialization completed	(imageRef: obj, parentDimensions: { width, height }): void
onClick	Click on a zone in image	(area: obj, index: num, event): void
onMouseEnter	Hovering a zone in image	(area: obj, index: num, event): void
onMouseLeave	Leaving a zone in image	(area: obj, index: num, event): void
onMouseMove	Moving mouse on a zone in image	(area: obj, index: num, event): void
onMouseDown	Clicks any button of the mouse on a zone in image	(area: obj, index: num, event): void
onMouseUp	Releases left click of the mouse on a zone in image	(area: obj, index: num, event): void
onTouchStart	Start to touch the zone in image	(area: obj, index: num, event): void
onTouchEnd	Releases touch from the zone in image	(area: obj, index: num, event): void
onImageClick	Click outside of a zone in image	(event): void
onImageMouseMove	Moving mouse on the image itself	(event): void

Methods

Method	Description
clearHighlightedArea	Clear all selected highlighted area from your map

Map Properties

A map is an object describing highlighted areas in the image.

Its structure is similar to the HTML syntax of mapping:

• map: (object) Object to describe highlighted zones
  • name: (string) Name of the map, used to bind to the image.
  • areas: (array) Array of area objects - area: (object) Shaped like below :

Property	Type	Description	Default
id	string	Uniquely identify an area. An index in an array is used if this value is not provided. You can set it with areaKeyName property	index
shape	string	Either rect, circle or poly	required
coords	array of number	Coordinates delimiting the zone according to the specified shape: rect: top-left-X,top-left-Y,bottom-right-X,bottom-right-Y circle: center-X,center-Y,radius poly: Every point in the polygon path as point-X,point-Y,...	required
disabled	string	Enable/Disable area listeners and highlighting	false
href	string	Target link for a click in the zone (note that if you provide an onClick prop, href will be prevented)	undefined
fillColor	string	Fill color of the highlighted zone	rgba(255, 255, 255, 0.5)
strokeColor	string	Border color of the highlighted zone	rgba(0, 0, 0, 0.5)
lineWidth	string	Border thickness of the highlighted zone	1
preFillColor	string	Pre filled color of the highlighted zone	undefined

When received from an event handler, an area is extended with the following properties:

Property	type	Description
scaledCoords	array of number	Scaled coordinates
center	array of number	Coordinates positioning the center or centroid of the area: [X, Y]

License

Distributed with an MIT License. See LICENSE.txt for more details!

Copyright (c) 2021 Juan Sebastián Díaz