react-hotspots

React component to create image hotspots

Install

Install using npm or yarn

npm install react-hotspots

yarn add react-hotspots

Usage

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