# react-image-hotspot-viewer
> A React component to view add and manage hotspots over an image with tooltip. The component is built using [Material UI v5](https://material-ui.com/) and [React](https://reactjs.org/). Supports both desktop and mobile devices.
Latest version **0.3.0** (published 2023-03-28) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-image-hotspot-viewer
pnpm add react-image-hotspot-viewer
yarn add react-image-hotspot-viewer
bun add react-image-hotspot-viewer
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.3.0 |
| Published | 2023-03-28 |
| First published | 2023-02-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 7 |
| Unpacked size | 141.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Abiram-N |
| Maintainers | abiram-n |
| Keywords | react, image, hotspot, viewer, material-ui, mui, editable, tooltip, customizable, react-image-hotspot-viewer, react-image-hotspot, react-image-viewer, add-hotspot, edit-hotspot, delete-hotspot, manage-hotspots |
## Links
- npm: https://www.npmjs.com/package/react-image-hotspot-viewer
- Repository: https://github.com/Abiram-N/react-image-hotspot-viewer
- Homepage: https://github.com/Abiram-N/react-image-hotspot-viewer#readme
- Issues: https://github.com/Abiram-N/react-image-hotspot-viewer/issues
- npm.io page: https://npm.io/package/react-image-hotspot-viewer
## Dependencies (7)
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.11.10
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.10.6
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.10.6
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.20.2
- [@mui/styled-engine](https://npm.io/package/@mui/styled-engine.md) ^5.11.9
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.18.6
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.11.9
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.3.0 (latest) — 2023-03-28
- 0.2.0 — 2023-02-28
- 0.1.7-2 — 2023-02-28
- 0.1.7-1 — 2023-02-28
- 0.1.6-0 — 2023-02-28
- 0.1.5-0 — 2023-02-28
- 0.1.4 — 2023-02-28
- 0.1.3 — 2023-02-27
- 0.1.2 — 2023-02-27
- 0.1.1 — 2023-02-27
- 0.1.0 — 2023-02-27
## README
# 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](https://material-ui.com/) and [React](https://reactjs.org/). 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.
###### 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](#Managing-Events).
##### 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](https://nodejs.org/) v10+ to run.
```sh
npm i react-image-hotspot-viewer@latest
```
## Usage
##### Import Stylesheet
Import the stylesheet and Icons in your project
```sh
```
```sh
```
##### Import Component
Import the component in your project
```sh
import { ImageHotspotViewer } from 'react-image-hotspot-viewer'
```
##### Add Component
Add the component in your project
```sh
```
## Basic Example
```sh
import './App.css';
import { ImageHotspotViewer } from 'react-image-hotspot-viewer'
function App() {
return (
);
}
export default App;
```
## Hotspots
```sh
[{
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 | 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 |# 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.
```sh
```
#### 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`
}
```sh
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;
}
}
```
## Upcoming Features
Below are the features that are planned to be added in the near future.
- [x] Add support for adding hotspot from UI
- [ ] Add support for custom tootip style
- [ ] Add support for custom pin styles
## License
MIT
**Free Software, Hell Yeah!**
---
_Source: https://npm.io/package/react-image-hotspot-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
## Installation
React Image Hotspot Viewer requires [Node.js](https://nodejs.org/) v10+ to run.
```sh
npm i react-image-hotspot-viewer@latest
```
## Usage
##### Import Stylesheet
Import the stylesheet and Icons in your project
```sh
```
```sh
```
##### Import Component
Import the component in your project
```sh
import { ImageHotspotViewer } from 'react-image-hotspot-viewer'
```
##### Add Component
Add the component in your project
```sh