Skip to content

filipecorrea/react-image-hotspots

Repository files navigation

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

Start

Start the project running:

npm start

Test

Test the project running:

npm test

Build

Build the project running:

npm run build