react-image-hotspots

React component for rendering images with zoom controls and hotspots.

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	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