Component

SlugMangle

Mangle a phrase into a deterministic URL slug by removing accents, case and punctuation and joining words with hyphens. The transformed copy replaces the original until Restore label returns the exact wording.

Possible use

It could let a reviewer inspect how a handoff title would behave in a route, or let a presenter temporarily turn an agenda line into a compact URL token. The result is useful only at the boundary where a route is actually needed.

Reasonable alternative

A reasonable local alternative is keeping the human label and deriving a slug at the routing boundary. A reusable mangle button should not make readable copy pay the URL tax.

01 / Preview

Try it yourself.

Displayed label

Préparer l’ordinaire handoff

The readable phrase is waiting to lose its personality.

Mechanism

1: Start with a readable phrase containing accents and spaces.
2: Mangle it into a lowercase hyphenated route token.
3: Restore the exact human wording when the URL boundary is over.

02 / Usage

Put it somewhere.

example.tsxTSX

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

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

03 / API

Small surface area.

PropTypeDescription

labelstringThe readable phrase transformed into a URL-shaped slug.