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.
This package supports both desktop and mobile devices. It behaves differently in both the devices.
In Desktop view, the hotspot is displayed on hover of the image. Clicking on the hotspot opens the tooltip.
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.
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.
React Image Hotspot Viewer requires Node.js v10+ to run.
npm i react-image-hotspot-viewer@latestImport 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 the component in your project
import { ImageHotspotViewer } from 'react-image-hotspot-viewer'Add the component in your project
<ImageHotspotViewer
image="https://devcdn.extscape.com/images/SampleRoom.avif"
hotspots={hotspots}
imageStyles={{
borderRadius: '5px',
}}
/>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;[{
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,
}
}]| 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 |
| Prop | Type | Default | 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 |
Example code for advanced implementation is available here:
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 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-hotspotoredit-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;
}
}Below are the features that are planned to be added in the near future.
- Add support for adding hotspot from UI
- Add support for custom tootip style
- Add support for custom pin styles
MIT
Free Software, Hell Yeah!