Break complex interfaces into composable, maintainable React components.
A React composition guide on one theme: shape component boundaries so they grow without forks. Ten patterns, each naming the problem it solves and the cost it accepts. Children as content slots, props as knobs — a component with six boolean flags is really three components. Compound pieces share one internal contract for structural wiring only, never business data. Explicit variants replace boolean soup, so impossible combinations simply can't be written. State negotiated between siblings lifts to their common parent. Empty slots, loading content and empty lists each carry their own shape. Escape hatches come last and named; layout owns geometry while content owns meaning; tests ride public props and user-visible behavior.
Pattern cards expand each rule into applicable code — for reviewing component APIs, taming boolean-prop sprawl, and giving the team one shared vocabulary.
Examples describe the request and the shape of the expected deliverable; they are not completed run results.
This Card has 11 boolean flags: propose the refactor — children as slots, an explicit variant set — and list the invalid state combinations it kills.
A refactor blueprint: the new API shape, a migration map, and the state combinations now impossible to write.
Our Dialog context smuggles business data and half the consumers read it directly: redraw the interface/implementation line.
A stable useDialog interface proposal with migration steps and each consumer rewrite enumerated.
iOS · Android
iOS
Android
MPL-2.0
Floe original guide. Replaces the original candidate with independently authored content; upstream text is not distributed. Candidate identity and provenance remain in the package.
Floe
Publication commit 25e07dbeeb, audited source 84c524b6fb; catalog digest iOS 46196ba57ed7… · Android 16de89d019e2….
Version records ship with the signed catalog; the target and released versions are shown below.
