React component to create image hotspots
Install using npm or yarn
npm install react-hotspots
yarn add react-hotspots
Import the component and base styles:
import ReactHotspots from 'react-hotspots'
import 'react-hotspots/dist/style.css';
import { Si1Password } from 'react-icons/si';Use it:
<ReactHotspots
image='https://unsplash.com/photos/RD8qNV6QXy8/download?ixid=MnwxMjA3fDB8MXxhbGx8M3x8fHx8fDJ8fDE2NzYxNjkwNDk&force=true&w=2400'
imageAlt="React Logo"
className="cstm-container"
iconSize='30px'
iconColor="#ffffff"
overlay={true}
hotspots={[
{
left: '50%',
top: '50%',
triggerIcon: <Si1Password />,
className: 'cstm-hotspot',
iconSize: '60px',
iconColor: 'red',
content: 'Text',
modal: true,
},
{
left: '25%',
top: '25%',
content: <div>Hotspot 2</div>
},
{
left: '75%',
top: '75%',
content: <div>Hotspot 3</div>
}
]}
/>| Props | Type | Default | Description |
|---|---|---|---|
image |
String, required | Image source | |
imageAlt |
String, optional | Image alternative info | |
overlay |
Boolean, optional | true |
Adds a transparent black overlay to the image for better visibility |
className |
String, optional | Apply custom classname to the main container | |
iconSize |
String, optional | 30px |
Set the font size for the icon. This will be applied to all hotspots. |
iconColor |
String, optional | #ffffff |
Set the icon color. This will be applied to all hotspots. |
hotspots |
Array of objects, required | Contains information of hotspots to be added. |
| Key | Type | Default | Description |
|---|---|---|---|
left |
String, required | Horizontal position with css units(px,%,etc.) |
|
top |
String, required | Vertical position with css units(px,%,etc.) |
|
triggerIcon |
React element/image/svg, optional | <AiFillInfoCircle /> - from react-icons/ai library |
React element / image / svg / a react-icon to indicate the hotspot |
className |
String, optional | Apply custom classname to the hotspot element | |
iconSize |
String, optional | 30px |
Set the font size for the icon. This will be applied to individual hotspot and will override the global value. |
iconColor |
String, optional | #ffffff |
Set the icon color. This will be applied to individual hotspot and will override the global value. |
modal |
Boolean, optional | false |
If set to true, the hotspot content will be displayed in a modal. |
content |
React or HTML element, optional | Hotspot content. If no content is provided, only the icon would be displayed |
MIT License © 2023 the-marolie