2.2.5 • Published 2 months ago

react-image-hotspots v2.2.5

Weekly downloads
15
License
MIT
Repository
github
Last release
2 months ago

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

PropsTypeDefaultDescription
srcString, requiredImage source
altString, optionalImage alternative info
hideFullscreenControlBoolean, optionalfalseHide fullscreen control
hideZoomControlsBoolean, optionalfalseHide zoom controls
hideMinimapBoolean, optionalfalseHide minimap
hotspotsArray of objects, optional[]Hotspots
backgroundString, optionalContainer background color

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

Hotspot properties

PropsTypeDefaultDescription
xNumber, requiredPercentage vertical position
yNumber, requiredPercentage horizontal position
contentReact or HTML element, requiredHotspot 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
2.2.5

2 months ago

2.2.4

2 months ago

2.2.3

3 months ago

2.2.2

3 months ago

1.8.1

1 year ago

1.8.0

1 year ago

2.2.1

1 year ago

2.1.2

1 year ago

2.2.0

1 year ago

2.1.1

1 year ago

2.1.3

1 year ago

2.1.0

1 year ago

2.0.0

1 year ago

1.7.1

5 years ago

1.7.0

5 years ago

1.6.1

5 years ago

1.6.0

5 years ago

1.5.3

5 years ago

1.5.2

5 years ago

1.5.1

5 years ago

1.5.0

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.2

5 years ago

1.3.0

5 years ago

1.2.0

5 years ago

1.1.0

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago