react-image-pointer/README.md

A React component for creating interactive images with clickable points and information cards connected by lines. Enhanced with improved modal, better performance, and enhanced interactivity.

# 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

```bash
npm install react-image-pointer
```

## Usage

```jsx
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

```javascript
{
  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

```jsx
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