Package Exports

@zeitui-org/image-viewer
@zeitui-org/image-viewer/package.json

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@zeitui-org/image-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@zeitui-org/image-viewer

Un componente de visualización de imágenes para React con capacidades de zoom y desplazamiento.

Características

🔍 Zoom in/out con controles intuitivos
🔄 Rotación de imagen
⬇️ Descarga de imagen
🖨️ Impresión de imagen
📱 Modo pantalla completa
🔄 Reset a vista original
🎨 Personalización de controles
📦 Ligero y fácil de usar

Requisitos

React 18 o superior
React DOM 18 o superior
Tailwind CSS 3.x (Se recomienda usar Tailwind CSS 3 por estabilidad y compatibilidad. Si bien el componente podría funcionar con Tailwind CSS 4, no se garantiza la compatibilidad completa hasta que esta versión sea estable)

[!NOTE] Se recomienda específicamente usar Tailwind CSS 3.x ya que es la versión estable actual y ha sido probada exhaustivamente con este componente.

Instalación

1. Instalar el componente principal

npm

npm install @zeitui-org/image-viewer

pnpm

pnpm add @zeitui-org/image-viewer

yarn

yarn add @zeitui-org/image-viewer

2. Instalar dependencias de HeroUI

El componente utiliza HeroUI para los controles. Necesitas instalar los siguientes paquetes:

npm

npm install @heroui/button @heroui/theme @heroui/system framer-motion

pnpm

pnpm add @heroui/button @heroui/theme @heroui/system framer-motion

yarn

yarn add @heroui/button @heroui/theme @heroui/system framer-motion

Configuración especial para pnpm

Si estás usando pnpm, necesitas añadir la siguiente línea a tu archivo .npmrc:

public-hoist-pattern[]=*@heroui/*

Configuración

1. Tailwind CSS

Modifica tu archivo tailwind.config.js:

const { heroui } = require("@heroui/theme");

module.exports = {
  content: [
    // ... otras configuraciones
    "./node_modules/@zeitui-org/**/*.{js,jsx,ts,tsx}",
    // Estilos de componentes HeroUI necesarios
    "./node_modules/@heroui/theme/dist/components/(button).js"
  ],
  theme: {
    extend: {},
  },
  darkMode: "class",
  plugins: [heroui()],  // Añade el plugin de HeroUI
}

Uso

import { ImageViewer } from '@zeitui-org/image-viewer';

function App() {
  return (
    <ImageViewer src="ruta-de-tu-imagen.jpg"/>
  );
}

Props

Prop	Descripción	Tipo	Valor por defecto
src*	URL de la imagen a mostrar	string	-
controlVariant	Estilo de los controles	'solid' \| 'bordered' \| 'light' \| 'flat' \| 'faded' \| 'shadow' \| 'ghost'	'solid'
controlColor	Color de los controles	'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger'	'default'
controlSize	Tamaño de los controles	'sm' \| 'md' \| 'lg'	'md'
controlRadius	Radio de los controles	'none' \| 'sm' \| 'md' \| 'lg' \| 'full'	'lg'

Ejemplos

Visor Básico

<ImageViewer src="https://ejemplo.com/imagen.jpg" />

Licencia

MITlicense.