# react-hotspots > ![GitHub package.json version](https://img.shields.io/github/package-json/v/the-marolie/react-hotspots?style=for-the-badge) ![npm](https://img.shields.io/npm/dw/react-hotspots?style=for-the-badge) ![npm bundle size](https://img.shields.io/bundlephobia/min Latest version **1.3.2** (published 2023-09-26) · MIT license · 0 weekly downloads ## Install ```sh npm install react-hotspots pnpm add react-hotspots yarn add react-hotspots bun add react-hotspots ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.3.2 | | Published | 2023-09-26 | | First published | 2023-02-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 126.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | Akshith Marolie | | Maintainers | dope-lab | | Keywords | react, hotspot, image, react-hotspots, compoenent, react-component, react-image-hotspots, image-hotspots | ## Links - npm: https://www.npmjs.com/package/react-hotspots - Repository: https://github.com/the-marolie/react-hotspots - Homepage: .https://github.com/the-marolie/react-hotspots#readme - Issues: .https://github.com/the-marolie/react-hotspots/issues - npm.io page: https://npm.io/package/react-hotspots ## Dependencies (4) - [sass](https://npm.io/package/sass.md) ^1.58.0 - [buffer](https://npm.io/package/buffer.md) ^6.0.3 - [js-xxhash](https://npm.io/package/js-xxhash.md) ^2.0.0 - [react-icons](https://npm.io/package/react-icons.md) ^4.7.1 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.3.2 (latest) — 2023-09-26 - 1.3.1 — 2023-02-18 - 1.3.0 — 2023-02-18 - 1.2.2 — 2023-02-13 - 1.2.1 — 2023-02-12 - 1.2.0 — 2023-02-12 ## README ![GitHub package.json version](https://img.shields.io/github/package-json/v/the-marolie/react-hotspots?style=for-the-badge) ![npm](https://img.shields.io/npm/dw/react-hotspots?style=for-the-badge) ![npm bundle size](https://img.shields.io/bundlephobia/min/react-hotspots?style=for-the-badge) ![NPM License](https://img.shields.io/npm/l/react-hotspots?style=for-the-badge) # 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: ```jsx import ReactHotspots from 'react-hotspots' import 'react-hotspots/dist/style.css'; import { Si1Password } from 'react-icons/si'; ``` Use it: ```jsx , className: 'cstm-hotspot', iconSize: '60px', iconColor: 'red', content: 'Text', modal: true, }, { left: '25%', top: '25%', content:
Hotspot 2
}, { left: '75%', top: '75%', content:
Hotspot 3
} ]} /> ``` ## Demo [![Edit react-hotspots](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-hotspots-demo-3kcvfr?fontsize=14&hidenavigation=1&theme=dark) ### 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_ | `` - 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](https://github.com/the-marolie/react-hotspots/blob/main/LICENSE) © 2023 [the-marolie](https://github.com/the-marolie) --- _Source: https://npm.io/package/react-hotspots · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._