universal-comments

Web Component de comentarios listo para usar en HTML, React, Astro, Next.js, Vue y cualquier framework.

• 🌙 Tema dark/light
• 😊 Reacciones con emojis
• 📱 Responsive grid (1–3 columnas)
• ♿ Accesible (ARIA labels, live regions)
• ⚡ ~12 KB gzip, sin dependencias pesadas
• 📦 TypeScript + Tests

Vista previa

Instalación

npm install universal-comments

Con otros gestores de paquetes:

pnpm add universal-comments
bun add universal-comments
yarn add universal-comments

Uso rápido

HTML plano:

<script type="module">
  import "universal-comments";
</script>
<universal-comments></universal-comments>

React / Astro / Next.js:

import "universal-comments";

function App() {
  return <universal-comments max-comments="6" placeholder="Deja tu comentario..." theme="dark" />;
}

⚠️ SSR / Next.js: importa el componente solo en el cliente (p. ej. dentro de useEffect o con next/dynamic con ssr: false), ya que los Web Components requieren un navegador.

CDN (sin npm):

<script type="module">
  import "https://unpkg.com/universal-comments/dist/universal-comments.es.js";
</script>
<universal-comments theme="light"></universal-comments>

Atributos

Atributo	Tipo	Default	Descripción
max-comments	number	6	Comentarios visibles antes de "Ver más"
placeholder	string	"Escribe un comentario..."	Placeholder del textarea
theme	"dark"|"light"	"dark"	Tema del componente
char-limit	number	500	Máximo de caracteres por comentario

También acepta la propiedad JS initialComments: Comment[] para cargar comentarios existentes.

Documentación

Visita la documentación completa con ejemplos interactivos, guía rápida y referencia de API.

Desarrollo

git clone https://github.com/ingyesid24/universal-comments.git
cd universal-comments
npm install
npm run build    # Compila la librería
npm test         # Ejecuta los tests

Docs site

cd docs
npm install
npm run dev      # http://localhost:4321

Contribuir

La rama main está protegida. No se permite push directo ni merge sin PR aprobado.

1. Haz fork del repo
2. Crea una rama: git checkout -b mi-feature
3. Haz tus cambios y corre los tests: npm test
4. Asegúrate de que la build pase: npm run build
5. Abre un Pull Request describiendo los cambios
6. Espera la revisión y aprobación

Reportar bugs

Si encuentras un bug, abre un issue aquí.

Licencia

MIT — LICENSE — Copyright (c) 2026 ingyesid24. Puedes usarlo, modificarlo y distribuirlo libremente.