1---
2title: Create Explicit Component Variants
3impact: MEDIUM
4impactDescription: self-documenting code, no hidden conditionals
5tags: composition, variants, architecture
6---
7 
8## Create Explicit Component Variants
9 
10Instead of one component with many boolean props, create explicit variant
11components. Each variant composes the pieces it needs. The code documents
12itself.
13 
14**Incorrect (one component, many modes):**
15 
16```tsx
17// What does this component actually render?
18<Composer
19  isThread
20  isEditing={false}
21  channelId='abc'
22  showAttachments
23  showFormatting={false}
24/>
25```
26 
27**Correct (explicit variants):**
28 
29```tsx
30// Immediately clear what this renders
31<ThreadComposer channelId="abc" />
32 
33// Or
34<EditMessageComposer messageId="xyz" />
35 
36// Or
37<ForwardMessageComposer messageId="123" />
38```
39 
40Each implementation is unique, explicit and self-contained. Yet they can each
41use shared parts.
42 
43**Implementation:**
44 
45```tsx
46function ThreadComposer({ channelId }: { channelId: string }) {
47  return (
48    <ThreadProvider channelId={channelId}>
49      <Composer.Frame>
50        <Composer.Input />
51        <AlsoSendToChannelField channelId={channelId} />
52        <Composer.Footer>
53          <Composer.Formatting />
54          <Composer.Emojis />
55          <Composer.Submit />
56        </Composer.Footer>
57      </Composer.Frame>
58    </ThreadProvider>
59  )
60}
61 
62function EditMessageComposer({ messageId }: { messageId: string }) {
63  return (
64    <EditMessageProvider messageId={messageId}>
65      <Composer.Frame>
66        <Composer.Input />
67        <Composer.Footer>
68          <Composer.Formatting />
69          <Composer.Emojis />
70          <Composer.CancelEdit />
71          <Composer.SaveEdit />
72        </Composer.Footer>
73      </Composer.Frame>
74    </EditMessageProvider>
75  )
76}
77 
78function ForwardMessageComposer({ messageId }: { messageId: string }) {
79  return (
80    <ForwardMessageProvider messageId={messageId}>
81      <Composer.Frame>
82        <Composer.Input placeholder="Add a message, if you'd like." />
83        <Composer.Footer>
84          <Composer.Formatting />
85          <Composer.Emojis />
86          <Composer.Mentions />
87        </Composer.Footer>
88      </Composer.Frame>
89    </ForwardMessageProvider>
90  )
91}
92```
93 
94Each variant is explicit about:
95 
96- What provider/state it uses
97- What UI elements it includes
98- What actions are available
99 
100No boolean prop combinations to reason about. No impossible states.
101