react-image-pointer

Image Pointed Component

Un componente React interactivo que permite crear imágenes con puntos de interés conectados a información detallada.

Características

• ✨ Interactivo: Puntos clickeables en la imagen
• 🎨 Responsive: Se adapta a diferentes tamaños de pantalla
• 🌙 Modo oscuro: Soporte para tema oscuro
• 📱 Modal: Vista ampliada de imágenes
• 🔗 Enlaces: Soporte para enlaces externos
• 📐 Líneas dinámicas: Conexiones visuales entre puntos e información
• ⚡ Optimizado: Mejor rendimiento y gestión de eventos

Instalación

npm install image-pointed

Uso

import { ImagePointed } from 'image-pointed';

const App = () => {
  const itemData = {
    details: {
      title: "Mi Imagen Interactiva",
      description: "Descripción de la imagen"
    },
    points: [
      {
        id: "1",
        x: 25, // Porcentaje desde la izquierda
        y: 30, // Porcentaje desde arriba
        info: {
          title: "Punto 1",
          description: "Descripción del punto 1"
        },
        link: {
          title: "Ver más",
          url: "https://ejemplo.com"
        },
        image: {
          src: "https://ejemplo.com/imagen.jpg",
          alt: "Imagen del punto"
        }
      },
      {
        id: "2",
        x: 75,
        y: 60,
        info: {
          title: "Punto 2",
          description: "Descripción del punto 2"
        }
      }
    ]
  };

  return (
    <ImagePointed
      src="https://ejemplo.com/imagen-principal.jpg"
      maxHeight="600px"
      itemData={itemData}
      isDarkMode={false}
    />
  );
};

Props

Prop	Tipo	Requerido	Por defecto	Descripción
src	string	✅	-	URL de la imagen principal
itemData	object	✅	-	Datos de los puntos e información
maxHeight	string	❌	"600px"	Altura máxima de la imagen
isDarkMode	boolean	❌	false	Activar modo oscuro

Estructura de itemData

{
  details: {
    title: string,        // Título principal
    description?: string  // Descripción opcional
  },
  points: [
    {
      id: string,         // ID único del punto
      x: number,          // Posición X en porcentaje (0-100)
      y: number,          // Posición Y en porcentaje (0-100)
      info: {
        title: string,    // Título del punto
        description: string // Descripción del punto
      },
      link?: {            // Enlace opcional
        title: string,
        url: string
      },
      image?: {           // Imagen opcional
        src: string,
        alt: string
      }
    }
  ]
}

Mejoras en la versión actual

Modal mejorado

• ✅ Fondo con opacidad correcta
• ✅ Cierre con Escape y clic fuera
• ✅ Bloqueo del scroll del body
• ✅ Mejor responsive design
• ✅ Transiciones suaves

Componente principal

• ✅ Mejor gestión de estados con useCallback
• ✅ Cálculo de líneas más robusto
• ✅ Manejo de eventos optimizado
• ✅ Efectos visuales mejorados
• ✅ Mejor responsive design
• ✅ Líneas punteadas para mejor visibilidad

Interactividad

• ✅ Hover effects en puntos
• ✅ Transiciones suaves
• ✅ Mejor feedback visual
• ✅ Accesibilidad mejorada

Ejemplo completo

import React from 'react';
import { ImagePointed } from 'image-pointed';

const ExampleComponent = () => {
  const data = {
    details: {
      title: "iPhone 16 Pro",
      description: "Descubre las características más importantes del nuevo iPhone 16 Pro"
    },
    points: [
      {
        id: "camera",
        x: 20,
        y: 25,
        info: {
          title: "Cámara Triple",
          description: "Sistema de cámara profesional con zoom óptico de 5x"
        },
        link: {
          title: "Ver especificaciones",
          url: "https://apple.com/camera"
        },
        image: {
          src: "/images/camera-detail.jpg",
          alt: "Detalle de la cámara"
        }
      },
      {
        id: "screen",
        x: 80,
        y: 40,
        info: {
          title: "Pantalla Super Retina XDR",
          description: "Pantalla de 6.7 pulgadas con tecnología OLED"
        }
      }
    ]
  };

  return (
    <div className="container mx-auto p-4">
      <ImagePointed
        src="/images/iphone-16-pro.jpg"
        maxHeight="700px"
        itemData={data}
        isDarkMode={true}
      />
    </div>
  );
};

export default ExampleComponent;

Licencia

MIT