react-image-hotspots v2.2.5

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

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

Hotspot properties

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