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