Component Installation | Limbo 🖼️

🌐 Instalación via CDN

La forma más rápida de empezar es usando nuestro CDN integrado:

HTML

<!-- Component CSS -->
<link rel="stylesheet" href="https://limbo.lefebvre.es/cdn/component-limbo/latest/limbo.css">

<!-- Component JavaScript -->
<script src="https://limbo.lefebvre.es/cdn/component-limbo/latest/limbo.min.js"></script>

💡 Tip: Para producción, puedes usar una versión específica en lugar de 'latest':

<!-- Versión específica (recomendado para producción) -->
<script src="https://limbo.lefebvre.es/cdn/component-limbo/v1.0.0/limbo.min.js"></script>

📦 Instalación via NPM

Para proyectos que usan bundlers como Webpack, Vite, etc:

bash

npm install @lefebvre/component-limbo

Luego importa en tu código:

JavaScript

import Limbo from 'limbo-component';
import '@lefebvre/component-limbo/dist/limbo.css';

⚙️ Configuración Básica

Una vez instalado, configura tu primer componente:

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://limbo.lefebvre.es/cdn/component-limbo/latest/limbo.css">
</head>
<body>
    <!-- Opción 1: Contenedor para instancia manual -->
    <div id="limbo-gallery"></div>
    
    <!-- Opción 2: Input automático con clase js-limbo -->
    <input type="text" class="js-limbo" name="imagen" placeholder="URL de imagen">
    
    <script src="https://limbo.lefebvre.es/cdn/component-limbo/latest/limbo.min.js"></script>
    <script>
        // Configuración global
        Limbo.configure({
            publicKey: 'pk_tu_clave_publica',
            authMode: 'session'  // 'session', 'manual' o 'jwt'
        });
        
        // Opción 1: Crear instancia manual
        Limbo.create({
            container: '#limbo-gallery',
            mode: 'embed',      // 'embed', 'modal' o 'button'
            modeUI: 'full',     // 'full', 'gallery-only', 'upload-only', 'crop-only'
            callbacks: {
                onSelect: (data) => console.log('Imagen seleccionada:', data)
            }
        });
        
        // Opción 2: Configurar AutoInputs (detecta automáticamente .js-limbo)
        Limbo.configureAutoInputs({
            selector: '.js-limbo',
            return: 'json',     // 'url', 'json', 'assetId', 'base64'
            mode: 'modal'
        });
    </script>
</body>
</html>

🔧 Integración con Frameworks

React

import React, { useEffect, useRef } from 'react';

// Asume que Limbo está cargado globalmente o importado
function LimboGallery({ publicKey, onSelect }) {
    const containerRef = useRef(null);
    const instanceRef = useRef(null);

    useEffect(() => {
        // Configurar una sola vez
        Limbo.configure({
            publicKey: publicKey,
            authMode: 'session'
        });
    }, [publicKey]);

    useEffect(() => {
        if (containerRef.current && !instanceRef.current) {
            instanceRef.current = Limbo.create({
                container: containerRef.current,
                mode: 'embed',
                modeUI: 'full',
                callbacks: {
                    onSelect: (data) => onSelect?.(data)
                }
            });
        }

        return () => {
            if (instanceRef.current) {
                instanceRef.current.destroy();
                instanceRef.current = null;
            }
        };
    }, [onSelect]);

    return <div ref={containerRef}></div>;
}

Vue.js

<template>
  <div ref="limboContainer"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const props = defineProps(['publicKey']);
const emit = defineEmits(['select']);

const limboContainer = ref(null);
let limboInstance = null;

onMounted(() => {
  // Configurar
  Limbo.configure({
    publicKey: props.publicKey,
    authMode: 'session'
  });
  
  // Crear instancia
  limboInstance = Limbo.create({
    container: limboContainer.value,
    mode: 'embed',
    modeUI: 'full',
    callbacks: {
      onSelect: (data) => emit('select', data)
    }
  });
});

onBeforeUnmount(() => {
  limboInstance?.destroy();
});
</script>

📋 Requisitos

🌐 Navegadores

Chrome 80+
Firefox 75+
Safari 13+
Edge 80+

🔑 API Key

Necesitas una API Key válida de Limbo. Obtén una aquí.

📱 Responsive

El componente es completamente responsive y funciona en dispositivos móviles, tablets y desktop.

👉 Próximos Pasos

⚙️

Configuración

Aprende sobre todas las opciones de configuración disponibles.

→

📦 Instalación del Component