Component
ClickOrder
It removes each selected fragment and composes a permanent result in the exact order you chose, because content apparently needs to be assembled by hand.
01 / Preview
Try it yourself.
The chosen order will appear here
0 of 3 placed
Click the fragments in the order you want them to appear. The result stays assembled.
Mechanism
- 1
- Start with every fragment available.
- 2
- Click each one in a deliberate reading order.
- 3
- Watch each choice leave the tray and join the result.
- 4
- Choose again only after the entire order is complete.
02 / Usage
Put it somewhere.
example.tsxTSX
import { ClickOrder } from "gra-ui";
import "gra-ui/styles.css";
export function OrderedCopy() {
return (
<ClickOrder>
<span>First,</span>
<span>then this,</span>
<span>finally this.</span>
</ClickOrder>
);
}03 / API
Small surface area.
PropTypeDescription
childrenReactNodeThe fragments selected into a user-defined order.