Image Pointer Component

A React component for creating interactive images with clickable points connected to detailed information.

Features

• ✨ 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

Installation

npm install react-image-pointer

Usage

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}
    />
  );
};

Props

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

itemData Structure

{
  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
      }
    }
  ]
}

Improvements in Current Version

Enhanced Modal

• ✅ Correct background opacity
• ✅ Close with Escape and click outside
• ✅ Body scroll lock
• ✅ Better responsive design
• ✅ Smooth transitions

Main Component

• ✅ Better state management with useCallback
• ✅ More robust line calculation
• ✅ Optimized event handling
• ✅ Enhanced visual effects
• ✅ Better responsive design
• ✅ Continuous lines for better visibility

Interactivity

• ✅ Hover effects on points
• ✅ Smooth transitions
• ✅ Better visual feedback
• ✅ Improved accessibility

Complete Example

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;

License

MIT