Anatomía

El componente se construye en tres zonas apiladas dentro de una tarjeta redondeada. La toolbar superior muestra el título, un badge de contador de no leídos en vivo y un botón 'marcar todo como leído' que solo aparece cuando hay items sin leer. Debajo, una fila de pills desplazable permite alternar entre Todos, No leídos y los cinco filtros por tipo. La lista ocupa el espacio vertical restante con un max-height y overflow-y:auto. Cada fila tiene un avatar de 36px (iniciales o icono de tipo), título + mensaje + timestamp y uno o dos botones iconográficos. Un punto en posición absoluta sobre el avatar indica el estado de no leído.

Cómo funciona

La lista filtrada es un valor derivado calculado de forma síncrona a partir del state items y el filtro activo, sin necesidad de effect. Cuando un usuario elimina un item, la actualización del state lo retira del array de inmediato; AnimatePresence detecta la clave que abandona el DOM y reproduce la animación de salida (opacity 0, height 0) antes de desmontar. El prop layout en cada motion.div indica a Framer Motion que anime los siblings restantes hacia sus nuevas posiciones para que la lista cierre el hueco sin sobresaltos. Marcar como leído es un simple map sobre el array que pone isRead:true, lo que también elimina el punto de no leído y el badge sin coste de animación adicional.

Cómo crearlo en React

1. Modela tus notificaciones y prepara el state

   Define una interfaz InboxNotification con id, type, title, message, timestamp, isRead y campos sender opcionales. Almacena la lista en useState. Deriva la lista filtrada y el contador de no leídos de forma síncrona a partir de ese state, sin necesidad de useEffect.

   type NotificationType = "message" | "alert" | "mention" | "invite" | "system";
   interface InboxNotification {
     id: string;
     type: NotificationType;
     title: string;
     message: string;
     timestamp: string;
     isRead: boolean;
     sender?: string;
     senderInitials?: string;
   }
   const [items, setItems] = useState<InboxNotification[]>(initialNotifications);
   const filtered = items.filter(item =>
     filter === "all" ? true : filter === "unread" ? !item.isRead : item.type === filter
   );

2. Construye la fila de pills de filtro

   Recorre con map un array fijo de claves de filtro y renderiza un botón para cada una. El pill activo recibe un borde y un fondo de acento mediante color-mix; los pills inactivos son transparentes con un borde atenuado. Aplica overflow-x:auto y white-space:nowrap en el contenedor para que se desplace en pantallas estrechas en lugar de envolver.

   {(["all", "unread", "message", "alert", "mention", "invite", "system"] as FilterType[]).map(f => (
     <button
       key={f}
       onClick={() => setFilter(f)}
       style={{
         border: filter === f ? "1px solid var(--color-accent)" : "1px solid var(--color-border)",
         background: filter === f ? "color-mix(in srgb, var(--color-accent) 10%, transparent)" : "transparent",
         color: filter === f ? "var(--color-accent)" : "var(--color-foreground-muted)",
       }}
     >
       {filterLabels[f]}
     </button>
   ))}

3. Anima la lista con AnimatePresence + layout

   Envuelve la lista recorrida en AnimatePresence con initial={false} para que los items existentes no se animen al montar. Cada motion.div necesita una clave estable (el id de la notificación), el prop layout y variants initial/animate/exit que controlan opacity y height. La salida hacia height:0 crea el efecto de colapso cuando los items se eliminan o se filtran.

   <AnimatePresence initial={false}>
     {filtered.map(notif => (
       <motion.div
         key={notif.id}
         layout
         initial={{ opacity: 0, height: 0 }}
         animate={{ opacity: 1, height: "auto" }}
         exit={{ opacity: 0, height: 0 }}
         transition={{ duration: 0.3, ease: [0.16, 1, 0.3, 1] }}
         style={{ overflow: "hidden" }}
       >
         {/* row content */}
       </motion.div>
     ))}
   </AnimatePresence>

4. Conecta marcar-como-leído y eliminar

   Ambas acciones son transformaciones puras de state envueltas en useCallback. Marcar-como-leído recorre el array y cambia isRead; eliminar filtra el item fuera del array. Como AnimatePresence vigila la lista por clave, la animación de salida se dispara automáticamente al eliminar sin ningún disparador manual.

   const markAsRead = useCallback((id: string) => {
     setItems(prev => prev.map(n => n.id === id ? { ...n, isRead: true } : n));
   }, []);
   
   const deleteNotification = useCallback((id: string) => {
     setItems(prev => prev.filter(n => n.id !== id));
   }, []);

Cuándo usarlo

Este componente encaja en cualquier lugar donde un usuario deba clasificar un flujo mixto de eventos: dashboards SaaS, paneles de administración, herramientas para desarrolladores, apps internas. Los pills de filtro lo hacen práctico cuando hay varios tipos de notificaciones que los usuarios quieren aislar. Evítalo para feeds de un solo tipo (chat puro, alertas puras) donde una lista más simple sin la sobrecarga de los pills se lee mejor. En el lado del backend, reemplaza el array de useState por una suscripción en tiempo real (WebSocket, SSE o polling con SWR) y el componente encaja sin cambios.

Usado por

• Linear, Centro de notificaciones estilo inbox con filtros por tipo, contadores de no leídos y marcado-como-hecho controlado por teclado.
• GitHub, Bandeja de notificaciones con filtros por motivo (menciones, revisiones, CI) y acciones masivas de lectura y descarte.
• Slack, Panel de feed de actividad con filtrado por tipo e indicadores de punto de no leído en cada entrada.
• Vercel, Feed de notificaciones del dashboard con tipos de eventos de despliegue, equipo y facturación, cada uno con código de color.

FAQ