react-image-hotspots

React component for rendering images with zoom controls and hotspots.

Live demo

Install

Install from npm and include it in your project build process:

npm install react-image-hotspots --save

Or install from yarn running:

yarn add react-image-hotspots

Usage

import ImageHotspots from 'react-image-hotspots'

<ImageHotspots
  src='https://raw.githubusercontent.com/filipecorrea/react-image-hotspots/master/src/landscape.jpg'
  alt='Sample image'
  hotspots={
    [
      { x: 10, y: 30, content: <span>Hotspot 1</span> },
      { x: 40, y: 70, content: <span>Hotspot 2</span> },
      { x: 80, y: 30, content: <span>Hotspot 2</span> }
    ]
  }
/>

Component properties

| Props | Type | Default | Description | |-------------------------|------------------------------|---------|----------------------------| | src | String, required | | Image source | | alt | String, optional | | Image alternative info | | hideFullscreenControl | Boolean, optional | false | Hide fullscreen control | | hideZoomControls | Boolean, optional | false | Hide zoom controls | | hideMinimap | Boolean, optional | false | Hide minimap | | hotspots | Array of objects, optional | [] | Hotspots | | background | String, optional | | Container background color |

If image size is smaller than the container size, zoom controls and minimap will be hidden.

Hotspot properties

| Props | Type | Default | Description | |-----------|-----------------------------------|---------|--------------------------------| | x | Number, required | | Percentage vertical position | | y | Number, required | | Percentage horizontal position | | content | React or HTML element, required | | Hotspot content |

Development

Prerequisites

• Node.js 16

Start

Start the project running:

npm start

Test

Test the project running:

npm test

Build

Build the project running:

npm run build