Component

PercentParcel

One activation applies the real `encodeURIComponent` transformation to the supplied label and displays the resulting transport marks. A second activation restores the original readable text without involving a network or storage layer.

Possible use

It could let a reviewer package a handoff label for a URL-shaped filing system, or let a presenter reveal the transport spelling hidden inside an agenda phrase. The browser already performs this conversion invisibly when it matters.

Reasonable alternative

A reasonable local alternative is passing the value to `encodeURIComponent` at the boundary that needs it and keeping the display readable. A visible parcel makes transport syntax compete with the message.

01 / Preview

Try it yourself.

Prepare the ordinary handoff

Mechanism

1: Start with a readable phrase.
2: Parcel it into real URL percent escapes.
3: Unpack the transport spelling to restore the message.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function TransportLabel() {
  return <PercentParcel label="Prepare the ordinary handoff" />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe readable text converted into a percent-encoded parcel.