StreamEvents

Cuándo usarlo

Props. items ({ type, user, amount?, months?, detail?, time?, id? }), max (5 por defecto), title ("Últimos eventos"), width (360), animate.

Cuándo usarla. En un lateral del overlay, como memoria de lo que acaba de pasar mientras las alertas ya se han ido. Los siete tipos de evento comparten icono y etiqueta con StreamAlert. El detalle se genera solo (por ejemplo, "Donación · 5,00 €", "Raid entrante · 1.284"); detail lo sustituye. Con animate, solo entra la primera fila.

Evita. Más de siete filas: es una lista de un vistazo, no un historial. Poner la hora absoluta: "hace 2 min" se entiende al instante, "21:43" obliga a calcular.

Filas que se conservan. Cada fila se reconoce por su id (ampliación sobre la guía) o, si no lo tiene, por su tipo, usuario y cifra. Al llegar un evento arriba, solo se monta y se anima esa fila; las demás no se mueven. time es texto: la app decide cuándo pasa de "ahora" a "1 min".

Accesibilidad. Es una lista (<ul>) cuyo nombre es el título.

Ejemplos

Props

Código

import { StreamEvents } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<StreamEvents
				animate
				items={[
					{ id: 3, type: "follow", user: "lucia_pixel", time: "ahora" },
					{ id: 2, type: "donation", user: "Marta_en_Directo", amount: 5, time: "2 min" },
					{ id: 1, type: "raid", user: "TioBigotes", amount: 1284, time: "9 min" },
				]}
			/>
		</>
	);
}

---
import { StreamEvents } from "@jotis-me/react";
---

<StreamEvents
	animate
	items={[
		{ id: 3, type: "follow", user: "lucia_pixel", time: "ahora" },
		{ id: 2, type: "donation", user: "Marta_en_Directo", amount: 5, time: "2 min" },
		{ id: 1, type: "raid", user: "TioBigotes", amount: 1284, time: "9 min" },
	]}
/>