Introduction

A tiny formatting helper for rendering a piece of dynamic application data — not static page content. It renders the value (optionally passed through a formatValue transform), or a subtle, accessible "—" placeholder when the value is null, undefined, an empty string, or an empty array.

The Display Value component is integrated as a displayValue block in the Page Builder, letting content authors place a piece of text that should render as an explicit, accessible "no value" placeholder when intentionally left blank — rather than an empty gap or a hand-typed "N/A". Its formatValue transform is a plain code-level prop (a function can't be expressed as serializable page-builder content), so from app code — a table cell, a detail panel field, a formatted date — reach for DisplayValue directly instead of going through a CMS block.

Usage

1. Plain values

Strings, numbers, and other non-empty values render as-is (coerced to a string when no formatValue is given).

<DisplayValue value="Park UI" />
<DisplayValue value={42} />

2. Formatting a value

formatValue runs only when the value is non-empty, so it never has to handle null/undefined itself.

<DisplayValue
  value={someDate}
  formatValue={(date) =>
    date.toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })
  }
/>

3. Page Builder block

The CMS block only exposes value (a plain string) — there's no way to author a formatValue function through content — so leaving the field blank is how an editor deliberately requests the empty-state placeholder rather than typing a filler value themselves.

{
  "type": "displayValue",
  "value": "Q4 shipping estimate: 3 business days"
}

4. Empty values

null, undefined, "", and [] all render the same accessible fallback — a decorative dash for sighted users, plus visually-hidden text for screen readers.

<DisplayValue value={null} />
<DisplayValue value={undefined} />
<DisplayValue value="" />

Props

Developer Notes & Accessibility

• Zero JS, always. DisplayValue has no interactive behavior of any kind — it computes its output synchronously during server render and never ships a client island (Tier-3, Presentational).
• Emptiness check: a value counts as empty only if it is null, undefined, an empty string, or an empty array — 0 and false are treated as real values and render normally.
• Accessible fallback: the empty state renders a decorative — (aria-hidden="true") alongside visually-hidden text reading "No value available", so screen reader users get an explicit announcement instead of silence or a bare dash.