fe-react-patterns

What problem does it solve?

Overly complex React component APIs caused by numerous boolean props lead to hard-to-maintain code and unpredictable UI. This skill promotes composition-first patterns to create explicit variants and compound components, making APIs easier to understand and reuse.

Core Features & Use Cases

• Composition over configuration: break booleans into small, explicit components (Frame, Header, Input) and separate variants (ThreadComposer, EditComposer, ForwardComposer).
• Compound Components for shared state: use a context-driven provider to share state across related parts without tight coupling.
• Explicit Variants: provide dedicated components that reveal purpose and required state, reducing guesswork.
• Children over Render Props: prefer nested composition to render props for clearer structure.

Quick Start

Start by composing a ChannelComposer with Composer.Frame, Composer.Header, Composer.Input, and a Footer containing Formatting, Emojis, and Submit.