React Img Mapper

React Component to highlight interactive zones in images

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

Installation

Package: react-img-mapper

# via npm
npm install react-img-mapper --save

# via yarn
yarn add react-img-mapper

Demo & Examples

Live Demo: Demo

To run the example locally

git clone https://github.com/img-mapper/react-docs.git
npm install
npm start

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 AND PUT IT HERE
    areas: 'https://raw.githubusercontent.com/img-mapper/react-docs/master/src/assets/example.json',
  };

  return <ImageMapper src={URL} map={MAP} />;
};

export default Mapper;

Properties

Properties Callback

Methods

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

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

License

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

Copyright (c) 2024 Nisharg Shah