Component
NestChildren
It removes one child at a time from a menu and wraps the growing stack with it, turning a finished tree into an activity.
01 / Preview
Try it yourself.
Choose a child to start the stack
0 of 4 children nested
Click each child. Every choice becomes a new layer around the stack.
Mechanism
- 1
- Start with four ordinary pieces of content.
- 2
- Click any available child to place it around the current stack.
- 3
- The order of your clicks becomes the nesting order.
- 4
- Unnest everything when the hierarchy is sufficiently ceremonial.
02 / Usage
Put it somewhere.
example.tsxTSX
import { NestChildren } from "gra-ui";
import "gra-ui/styles.css";
export function NestedFields() {
return (
<NestChildren>
<span>Title</span>
<span>Status</span>
<span>Owner</span>
</NestChildren>
);
}03 / API
Small surface area.
PropTypeDescription
childrenReactNodeThe children nested one at a time into a visible stack.