1.3.2 • Published 8 months ago
react-hotspots v1.3.2
react-hotspots
React component to create image hotspots
Install
Install using npm or yarn
npm install react-hotspotsyarn add react-hotspotsUsage
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>
}
]}
/>Demo
Component props
| 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. |
Hotspot object
| 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 |
License
MIT License © 2023 the-marolie