@behold/preact

Qué es

@behold/preact es el componente oficial de Behold para Preact, publicado por BeholdSocial. Es un envoltorio ligero alrededor del web component embebible de Behold, un servicio que permite añadir galerías de Instagram a webs, apps y campañas de email. Está escrito en TypeScript y empaquetado con Vite, y se distribuye bajo licencia MIT.

Para qué sirve

• Mostrar una galería de Instagram conectada a Behold dentro de una aplicación Preact.
• Integrar el feed con un único componente, configurando el aspecto desde el panel de Behold y no desde el código.
• Reaccionar a la carga del widget mediante el callback onLoad.
• Reutilizar la misma fuente de datos de Behold (feed) en distintos frontends.

Cuándo usarlo

Es la opción recomendada cuando ya usas Behold como gestor de tu feed de Instagram y tu proyecto está hecho en Preact. Si trabajas con React hay un paquete equivalente (@behold/react), y para proyectos sin framework puedes usar directamente el web component embebible de Behold.

Ejemplo

Instalación:

npm install @behold/preact
# o: pnpm add @behold/preact
# o: yarn add @behold/preact

Uso básico (el feedId se obtiene en el panel de Behold, en “Embed Code”):

import BeholdWidget from '@behold/preact';

function Galeria() {
  return <BeholdWidget feedId="YOUR_FEED_ID" onLoad={() => console.log('Widget cargado')} />;
}

Puntos clave

• Componente oficial mantenido por el equipo de Behold.
• Wrapper mínimo sobre el web component, escrito en TypeScript.
• Configuración del diseño desde el panel de Behold, no en el código.
• Prop onLoad para ejecutar lógica tras la carga inicial.

Ten en cuenta

• El componente depende de APIs solo de cliente: no se prerenderiza con SSR ni SSG.
• Inicialmente se monta con 0px de alto, así que conviene envolverlo en un contenedor con dimensiones para evitar saltos de layout (CLS).
• Behold es un servicio freemium (registro gratuito con planes de pago superiores), por lo que el componente requiere una cuenta y un feed configurado para funcionar.