react-image-pointer

React Image Pointer

A React component for creating interactive images with clickable points and information cards connected by lines. Perfect for product showcases, educational content, and interactive documentation.

Features

• 🖱️ Interactive Points: Click on image points to see detailed information
• 📱 Responsive Design: Works perfectly on desktop and mobile devices
• 🌙 Dark/Light Mode: Built-in theme support
• 🔗 External Links: Add links to external resources
• 🖼️ Image Modals: Expand images in full-screen modals
• 📐 Dynamic Lines: Automatic line positioning between points and info cards
• ⚡ TypeScript Support: Full TypeScript definitions included
• 🎨 Tailwind CSS: Styled with Tailwind CSS classes

Installation

npm install react-image-pointer
# or
yarn add react-image-pointer

Usage

Basic Example

import { ImagenConInfo } from 'react-image-pointer';

const data = {
  details: {
    title: 'iPhone 16',
    description: 'Latest model with advanced features'
  },
  points: [
    {
      id: 1,
      x: 64.7,
      y: 37,
      info: {
        title: 'Side Button',
        description: 'Used to turn the device on/off and activate Siri'
      },
      link: {
        title: "Learn More",
        url: "https://example.com"
      }
    },
    {
      id: 2,
      x: 42,
      y: 20,
      info: {
        title: 'Camera System',
        description: 'Multiple camera configuration for high-quality photos'
      },
      image: {
        src: '/camera-detail.jpg',
        alt: 'Camera Details'
      }
    }
  ]
};

function App() {
  return (
    <ImagenConInfo 
      src="/iphone-16.jpg"
      itemData={data}
      maxHeight="600px"
      isDarkMode={false}
    />
  );
}

With Dark Mode

import { useState } from 'react';
import { ImagenConInfo } from 'react-image-pointer';

function App() {
  const [isDarkMode, setIsDarkMode] = useState(true);

  return (
    <div className={isDarkMode ? 'bg-gray-900' : 'bg-white'}>
      <button onClick={() => setIsDarkMode(!isDarkMode)}>
        Toggle Theme
      </button>
      
      <ImagenConInfo 
        src="/product-image.jpg"
        itemData={productData}
        isDarkMode={isDarkMode}
      />
    </div>
  );
}

Props

ImagenConInfo

Prop	Type	Default	Description
src	string	required	URL of the main image
itemData	ItemData	required	Data structure containing points and details
maxHeight	string	"600px"	Maximum height of the image
isDarkMode	boolean	false	Enable dark mode styling

Data Structure

interface ItemData {
  details: {
    title: string;
    description?: string;
  };
  points: Array<{
    id: number;
    x: number;        // Percentage from left (0-100)
    y: number;        // Percentage from top (0-100)
    info: {
      title: string;
      description: string;
    };
    link?: {
      title: string;
      url: string;
    };
    image?: {
      src: string;
      alt: string;
    };
  }>;
}

Styling

The component uses Tailwind CSS classes. If you're not using Tailwind in your project, you'll need to include the necessary styles or override them with your own CSS.

Custom Styling

You can override the default styles by targeting the component's classes:

/* Custom styles for info cards */
.info-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 16px;
}

/* Custom styles for points */
.point {
  background: #ff0000;
  border: 2px solid #ffffff;
}

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

Contributing

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Support

If you have any questions or need help, please open an issue on GitHub or contact us at [e-mail].

Changelog

1.0.0

• Initial release
• Interactive image points with information cards
• Dark/light mode support
• Responsive design
• TypeScript support