2.2.5 • Published 2 months ago
react-image-hotspots v2.2.5
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 | 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
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