Molecule.dev

@molecule/app-comparison-row-react

Feature · comparison-row · App (browser) · v1.0.2 · Apache-2.0

Period-over-period stat comparison (" vs ", with delta)

npm install @molecule/app-comparison-row-react

npm · Source on GitHub

How it works

@molecule/app-comparison-row-react is a ready-made comparison-row feature for the app (browser) side. It composes the core interfaces it needs, so it works with whichever providers your app has bonded.

import { ComparisonRow } from '@molecule/app-comparison-row-react'

;<ComparisonRow
  label="Revenue"
  current="$24,800"
  previous="$21,300"
  deltaPct={16.4}
  periodLabel="vs. last month"
/>

Works with: @molecule/app-react, @molecule/app-ui, @molecule/app-ui-react

Reference

Period-over-period stat comparison row.

Exports <ComparisonRow>.

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 { ComparisonRow } from '@molecule/app-comparison-row-react'

;<ComparisonRow
  label="Revenue"
  current="$24,800"
  previous="$21,300"
  deltaPct={16.4}
  periodLabel="vs. last month"
/>

Type

feature

Installation

npm install @molecule/app-comparison-row-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
npm install -D @types/react

API

Interfaces

ComparisonRowProps

Props for ComparisonRow.

interface ComparisonRowProps {
  /** Label for the metric (e.g. "Revenue"). */
  label: ReactNode
  /** Current period value (formatted). */
  current: ReactNode
  /** Previous period value (formatted). */
  previous?: ReactNode
  /** Numeric delta% — drives direction + color when present. */
  deltaPct?: number
  /** Custom delta formatter. */
  formatDelta?: (deltaPct: number) => ReactNode
  /** Optional sub-text ("vs. last week"). */
  periodLabel?: ReactNode
  /** Extra classes. */
  className?: string
}

Functions

ComparisonRow(props)

Period-over-period stat comparison row — current value, optional previous value, and a coloured delta% chip. Used in dashboards, report summaries, finance overviews.

function ComparisonRow({
  label,
  current,
  previous,
  deltaPct,
  formatDelta,
  periodLabel,
  className,
}: ComparisonRowProps): JSX.Element
  • props — Component props (see ComparisonRowProps).

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

The delta chip colors by SIGN with fixed semantics: positive = green, negative = red (hardcoded hexes, not theme tokens). There is no "down-is-good" inversion — for metrics like churn or costs, negate deltaPct (and restate the sign in formatDelta, which controls the text only, never the color). label / current / previous / periodLabel are consumer-provided ReactNodes — pass pre-formatted, translated values.