Component

PunctuationSieve

It scans the supplied label for actual punctuation, removes each mark in order and places it into a visible sieve tray. The sentence receives real placeholders while the punctuation remains available to restore.

Possible use

It could let a reviewer inspect which marks carry the drama in a handoff sentence, or let a presenter strip punctuation from an agenda phrase before putting every mark back.

Reasonable alternative

A reasonable local alternative is leaving punctuation in the sentence or using one text utility. A sieve should not supervise a comma one click at a time.

01 / Preview

Try it yourself.

Please, file this: today.

No marks collected

Mechanism

1: Start with punctuation embedded in a readable sentence.
2: Press Sieve next mark to remove the next actual punctuation character.
3: The sentence leaves placeholders while the marks collect in the tray.
4: Put marks back when the tray has become more important than grammar.

02 / Usage

Put it somewhere.

example.tsxTSX

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

export function SiftedNotice() {
  return <PunctuationSieve label="Please, file this: today." />;
}

03 / API

Small surface area.

PropTypeDescription

labelstringThe text whose punctuation is removed into the sieve.