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