Component

NormalizationReferendum

Choose Compose, Decompose or Flatten. The label is actually normalized with the selected Unicode form and its resulting code points are displayed, so the vote can change both the data and the visible spelling.

Possible use

It could let a reviewer vote on how a handoff label stores accented names, or let a presenter make an agenda caption undergo a Unicode constitutional crisis. The code points change, but no one needed a referendum to choose a representation.

Reasonable alternative

A reasonable local alternative is normalizing at the data boundary once and rendering the resulting string normally. A display component should not make encoding policy a visible ballot.

01 / Preview

Try it yourself.

Café № 7

CU+0043aU+0061fU+0066éU+00E9␠U+0020№U+2116␠U+00207U+0037

Mechanism

1: Start with a label whose glyphs have more than one possible representation.
2: Choose Compose, Decompose or Flatten.
3: The actual normalized text and code points change with the vote.
4: Withdraw policy to return the wording to its supplied form.

02 / Usage

Put it somewhere.

example.tsxTSX

import { NormalizationReferendum } from "gra-ui";
import "gra-ui/styles.css";

export function SettledLabel() {
  return <NormalizationReferendum label="Café № 7" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe text submitted to the three competing Unicode normalization forms.