@molecule/app-activity-feed-react

React activity-feed primitives.

Exports:

<ActivityFeed> — flat vertical list of activity rows.
<ActivityFeedItem> — single row (avatar + actor/verb/target + timestamp + body).
<ActivityFeedGroup> — heading + list, compose multiple for "Today / Yesterday" feeds.
ActivityFeedItemData type for row data.

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Quick Start

import { ActivityFeed, ActivityFeedGroup } from '@molecule/app-activity-feed-react'

const items = [
  { id: '1', actor: 'Alice', verb: 'commented on', target: 'PR #42', timestamp: '2m ago' },
  { id: '2', actor: 'Bob', verb: 'closed', target: 'Issue #7', timestamp: '1h ago' },
]

// Flat feed
<ActivityFeed items={items} emptyState={<p>No activity yet.</p>} />

// Grouped by date
<ActivityFeedGroup heading="Today" items={items} />

Type

feature

Installation

npm install @molecule/app-activity-feed-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
npm install -D @types/react

API

Interfaces

`ActivityFeedProps`

Props for ActivityFeed.

interface ActivityFeedProps {
  /** Items in display order (usually most-recent first). */
  items: ActivityFeedItemData[]
  /** Rendered when `items` is empty. */
  emptyState?: ReactNode
  /** Optional footer (e.g. "Load more"). */
  footer?: ReactNode
  /** Extra classes. */
  className?: string
}

`ActivityFeedGroupProps`

Props for ActivityFeedGroup.

interface ActivityFeedGroupProps {
  /** Group heading — typically a formatted date ("Today", "Yesterday", "Mar 12"). */
  heading: ReactNode
  /** Items in this group. */
  items: ActivityFeedItemData[]
  /** Extra classes. */
  className?: string
}

`ActivityFeedItemProps`

Props for ActivityFeedItem.

interface ActivityFeedItemProps {
  item: ActivityFeedItemData
  /** Extra classes on the row wrapper. */
  className?: string
}

`ActivityFeedItemData`

Per-row activity data.

interface ActivityFeedItemData {
  /** Row id (React key). */
  id: string
  /** Actor avatar source URL. */
  avatarSrc?: string
  /** Actor display name. */
  actor: ReactNode
  /** Verb describing the action ("commented on", "assigned", "completed"). */
  verb: ReactNode
  /** Object of the action ("the ticket", "Project Alpha", etc.). */
  target?: ReactNode
  /** Optional supporting body (quote, diff, preview). */
  body?: ReactNode
  /** ISO timestamp or any node to render as "time ago". */
  timestamp: ReactNode
  /** Optional leading icon (replaces avatar when present). */
  icon?: ReactNode
}

Functions

`ActivityFeed(props)`

Simple activity feed — renders each ActivityFeedItemData via <ActivityFeedItem> and stacks them. For date-grouped feeds use <ActivityFeedGroup>.

function ActivityFeed({ items, emptyState, footer, className }: ActivityFeedProps): JSX.Element

props — Component props (see ActivityFeedProps).

`ActivityFeedGroup(props)`

Date-grouped activity section — a heading followed by a stack of items. Compose multiple <ActivityFeedGroup>s together for an organized "Today / Yesterday / Last week" feed.

function ActivityFeedGroup({ heading, items, className }: ActivityFeedGroupProps): JSX.Element

props — Component props (see ActivityFeedGroupProps).

`ActivityFeedItem(props)`

One entry in an <ActivityFeed>.

Shape: [avatar|icon] [actor verb target · timestamp] [body].

function ActivityFeedItem({ item, className }: ActivityFeedItemProps): JSX.Element

props — Component props (see ActivityFeedItemProps).

Injection Notes

Requirements

Peer dependencies:

@molecule/app-react ^1.0.1
@molecule/app-ui ^1.0.1
@molecule/app-ui-react ^1.0.1
react ^18.0.0 || ^19.0.0

Runtime Dependencies

@molecule/app-react
@molecule/app-ui
@molecule/app-ui-react
react

`@molecule/app-activity-feed-react`

How it works

Reference