React-image-hotspot-viewer NPM

React Image Hotspot Viewer - Material UI v5

View hotspots over an image with tooltip

A React component to view add and manage hotspots over an image with tooltip. The component is built using Material UI v5 and React. Supports both desktop and mobile devices.

Demo

This package supports both desktop and mobile devices. It behaves differently in both the devices.

Desktop View

In Desktop view, the hotspot is displayed on hover of the image. Clicking on the hotspot opens the tooltip.

productionimage

Managing Hotspots

The component supports adding, editing and deleting hotspots. The hotspots can be managed by onClickEvent prop. The prop is called whenever an event is triggered. More details on the prop can be found here.

EditableHotspots

Mobile View

In Mobile view, the hotspot is displayed as a pin on the image. Clicking on the hotspot opens the tooltip. The tooltip can be closed by clicking elsewhere on the image.

Installation

React Image Hotspot Viewer requires Node.js v10+ to run.

npm i react-image-hotspot-viewer@latest

Usage

Import Stylesheet

Import the stylesheet and Icons in your project

  <link href="https://devcdn.extscape.com/css/style.css" rel="stylesheet" />

 <link
    href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
    rel="stylesheet" />

Import Component

Import the component in your project

import { ImageHotspotViewer } from 'react-image-hotspot-viewer'

Add Component

Add the component in your project

 <ImageHotspotViewer
      image="https://devcdn.extscape.com/images/SampleRoom.avif"
      hotspots={hotspots}
      imageStyles={{
          borderRadius: '5px',
      }}
  />

Basic Example

import './App.css';
import { ImageHotspotViewer } from 'react-image-hotspot-viewer'

function App() {
  return (
    <div className="App">
      <div className="App-container">
        <ImageHotspotViewer
          image="https://devcdn.extscape.com/images/SampleRoom.avif"
          hotspots={hotspots}
          imageStyles={{
            borderRadius: '5px',
          }}
        />
      </div>
    </div>
  );
}

export default App;

Hotspots

[{
  id: 1,
  title: 'Sofa',
  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nisl sit amet lorem. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nisl sit amet lorem.',
  image: "https://devcdn.extscape.com/images/SeatSoftGrey.avif",
  position: {
    top: '80%',
    left: '35%'
  },
  action: {
    hasAction: true,
    type: 'link',
    url: 'https://www.google.com',
    label: 'View Product Details',
    icon: 'open_in_new',
  }
}, {
  id: 2,
  title: 'Lamp',
  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nisl sit amet lorem. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nisl sit amet lorem.',
  position: {
    top: '40%',
    left: '82%'
  },
  action: {
    hasAction: false,
  }
}]

Props

Prop	Type	Default	Description	Required
image	string		Image URL	Yes
hotspots	array	[]	Array of hotspots	Yes
imageStyles	object	{}	Styles for image	No
onClickEvent	function		Function called whenever an event is triggered	No

Hotspot Props

Prop	Type	Description	Required
id	string	Unique ID for hotspot	Yes
title	string	Title for hotspot	Yes
description	string	Description for hotspot	No
position	object	Position for hotspot	Yes
position.top	string	Top position for hotspot in percentage	Yes
position.left	string	Left position for hotspot in percentage	Yes
action	object	Action for hotspot	No
action.hasAction	boolean	Has action for hotspot	Yes if action is present
action.type	string	Type of action for hotspot	Yes if action is present
action.url	string	URL for hotspot	Yes if action type is URL
action.label	string	Label for hotspot	No
action.icon	string	Icon for hotspot	No	# react-image-hotspot-viewer

Advanced Implementation

Example code for advanced implementation is available here:

Managing Events

The component supports two events. The events are triggered when the hotspot is clicked and when a new spot is clicked.

 <ImageHotspotViewer
    image={image}
    hotspots={hotspots}
    imageStyles={{
        borderRadius: '10px',
    }}
    onEventChange={onEventChange}
/>

onEventChange Function

onEventChange function is called whenever an event is triggered. The function takes three parameters.

event: The event that is triggered. The event can be click.
subEvent: The sub event that is triggered. The sub event can be add-hotspot or edit-hotspot
data: The data associated with the event. The data is an object with the properties based on the event and sub event. -- add-hotspot: The event is triggered when user clicks on the component. Sample data for this event is provided below. { "top": 78.06841046277665, // Top position of the hotspot in percentage "left": 51.64383561643836, // Left position of the hotspot in percentage "offsetX": 377, // Offset X position of the hotspot "offsetY": 388 // Offset Y position of the hotspot } -- edit-hotspot: The event is triggered when user clicks on the hotspot. { "offsetX": 377, // Offset X position of the hotspot "offsetY": 388 // Offset Y position of the hotspot {...restProps} // All the properties of the hotspot }

const onEventChange = (event, subEvent, data) => {
    switch (event) {
        case 'click':
            switch (subEvent) {
                case 'add-hotspot':
                    //Implement your logic to add hotspot here 
                    break;
                case 'edit-hotspot':
                    //Implement your logic to edit hotspot here
                    break;
                default:
                    break;
            }
            break;
        default:
            break;
    }
}