A React component for creating interactive images with clickable points connected to detailed information.
- β¨ Interactive: Clickable points on images
- π¨ Responsive: Adapts to different screen sizes
- π Dark Mode: Dark theme support
- π± Modal: Full-size image view
- π Links: External link support
- π Dynamic Lines: Visual connections between points and information
- β‘ Optimized: Better performance and event handling
npm install react-image-pointer
import { ImagePointer } from 'react-image-pointer'; const App = () => { const itemData = { details: { title: "My Interactive Image", description: "Image description" }, points: [ { id: "1", x: 25, // Percentage from left y: 30, // Percentage from top info: { title: "Point 1", description: "Description of point 1" }, link: { title: "Learn more", url: "https://example.com" }, image: { src: "https://example.com/image.jpg", alt: "Point image" } }, { id: "2", x: 75, y: 60, info: { title: "Point 2", description: "Description of point 2" } } ] }; return ( <ImagePointer src="https://example.com/main-image.jpg" maxHeight="600px" itemData={itemData} isDarkMode={false} /> ); };
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
src |
string | β | - | URL of the main image |
itemData |
object | β | - | Data for points and information |
maxHeight |
string | β | "600px" | Maximum height of the image |
isDarkMode |
boolean | β | false | Enable dark mode |
{ details: { title: string, // Main title description?: string // Optional description }, points: [ { id: string, // Unique point ID x: number, // X position in percentage (0-100) y: number, // Y position in percentage (0-100) info: { title: string, // Point title description: string // Point description }, link?: { // Optional link title: string, url: string }, image?: { // Optional image src: string, alt: string } } ] }
- β Correct background opacity
- β Close with Escape and click outside
- β Body scroll lock
- β Better responsive design
- β Smooth transitions
- β Better state management with useCallback
- β More robust line calculation
- β Optimized event handling
- β Enhanced visual effects
- β Better responsive design
- β Continuous lines for better visibility
- β Hover effects on points
- β Smooth transitions
- β Better visual feedback
- β Improved accessibility
import React from 'react'; import { ImagePointer } from 'react-image-pointer'; const ExampleComponent = () => { const data = { details: { title: "iPhone 16 Pro", description: "Discover the most important features of the new iPhone 16 Pro" }, points: [ { id: "camera", x: 20, y: 25, info: { title: "Triple Camera System", description: "Professional camera system with 5x optical zoom" }, link: { title: "View specifications", url: "https://apple.com/camera" }, image: { src: "/images/camera-detail.jpg", alt: "Camera detail" } }, { id: "screen", x: 80, y: 40, info: { title: "Super Retina XDR Display", description: "6.7-inch OLED display with 2796 x 1290 resolution" } } ] }; return ( <div className="container mx-auto p-4"> <ImagePointer src="/images/iphone-16-pro.jpg" maxHeight="700px" itemData={data} isDarkMode={true} /> </div> ); }; export default ExampleComponent;
MIT