Component
PairwiseMerge
It makes you double-click two groups at a time, joins their content, and keeps reducing the list until one group remains.
01 / Preview
Try it yourself.
4 groups remain
Double-click two groups at a time. They become one group and stay merged.
Mechanism
- 1
- Double-click one group to mark it.
- 2
- Double-click a second group to join the pair.
- 3
- Repeat until four groups have become one.
- 4
- Separate again only after the reduction is complete.
02 / Usage
Put it somewhere.
example.tsxTSX
import { PairwiseMerge } from "gra-ui";
import "gra-ui/styles.css";
export function MergeFields() {
return (
<PairwiseMerge>
<span>Title</span>
<span>Status</span>
<span>Owner</span>
<span>Date</span>
</PairwiseMerge>
);
}03 / API
Small surface area.
PropTypeDescription
childrenReactNodeThe groups reduced two at a time.