Component
LengthOrder
It cycles through the original order, shortest label first, and longest label first, because visible copy apparently needs a ranking system.
01 / Preview
Try it yourself.
- Keep4
- Maybe later11
- Definitely not14
- No2
Click the order control. The list will rank its own labels by character count.
Mechanism
- 1
- Start with the labels in their supplied order.
- 2
- Click to put the shortest label first.
- 3
- Click again for longest first, then return to the beginning.
02 / Usage
Put it somewhere.
example.tsxTSX
import { LengthOrder } from "gra-ui";
import "gra-ui/styles.css";
export function SortedLabels() {
return (
<LengthOrder items={["Keep", "Maybe later", "Definitely not"]} />
);
}03 / API
Small surface area.
PropTypeDescription
itemsreadonly string[]The labels sorted by character count.