Skip to content

ListText

MD, under 1950B gzipped

"A, B, and C" formatted correctly for the current locale via Intl.ListFormat.

Category
Internationalisation
Budget
md, several states or a live subscription
Runtime deps
None

Preview

Preview language
Aisha, Bo, and Chidi

This is the exact fixture the conformance suite renders in CI. Switch the language to see the component mirror and reformat.

Install

npx shadcn@latest add https://kata-ui-rho.vercel.app/r/list-text.json

Copies the source into your project. Pulls in 3 primitives: format, use-locale, locale.

Source

"use client";

import { listFormat } from "../lib/format";
import { useLocale } from "../lib/use-locale";

export interface ListTextProps {
  items: string[];
  /** "and" (conjunction, default) or "or" (disjunction). */
  type?: Intl.ListFormatOptions["type"];
}

/*
 * Rendered inside a `suppressHydrationWarning` span.
 *
 * `Intl` output is not byte-identical across ICU versions, and Node's ICU is
 * not the browser's. This exact call produces "Jan 1 <U+2009>–<U+2009> 5, 2026"
 * on Node and "Jan 1 <U+0020>–<U+0020> 5, 2026" in Chrome — visually
 * identical, different bytes — so every server-rendered use would throw a
 * hydration error in a consumer's app through no fault of theirs.
 *
 * This is the case React documents the escape hatch for. The suppression is
 * scoped to this one text node, so a genuine structural mismatch anywhere else
 * still reports normally.
 */

/**
 * "Aisha, Bo, and Chidi" in English; "Aisha, Bo und Chidi" in German (no
 * Oxford comma); "Aisha、Bo、Chidiさん" shaped correctly in Japanese — via
 * `Intl.ListFormat` rather than a hardcoded `join(", ")` plus an English-only
 * "and" appended at the end.
 */
export function ListText({ items, type = "conjunction" }: ListTextProps) {
  const { locale } = useLocale();
  return <span suppressHydrationWarning>{listFormat(locale, { type }).format(items)}</span>;
}

What CI checks

← All components