Cursor rule

1---
2alwaysApply: false
3---
4 
5## Use Compound Components
6 
7Structure complex components as compound components with a shared context. Each
8subcomponent accesses shared state via context, not props. Consumers compose the
9pieces they need.
10 
11**Incorrect (monolithic component with render props):**
12 
13```tsx
14function Composer({
15  renderHeader,
16  renderFooter,
17  renderActions,
18  showAttachments,
19  showFormatting,
20  showEmojis,
21}: Props) {
22  return (
23    <form>
24      {renderHeader?.()}
25      <Input />
26      {showAttachments && <Attachments />}
27      {renderFooter ? (
28        renderFooter()
29      ) : (
30        <Footer>
31          {showFormatting && <Formatting />}
32          {showEmojis && <Emojis />}
33          {renderActions?.()}
34        </Footer>
35      )}
36    </form>
37  )
38}
39```
40 
41**Correct (compound components with shared context):**
42 
43```tsx
44const ComposerContext = createContext<ComposerContextValue | null>(null)
45 
46function ComposerProvider({ children, state, actions, meta }: ProviderProps) {
47  return (
48    <ComposerContext value={{ state, actions, meta }}>
49      {children}
50    </ComposerContext>
51  )
52}
53 
54function ComposerFrame({ children }: { children: React.ReactNode }) {
55  return <form>{children}</form>
56}
57 
58function ComposerInput() {
59  const {
60    state,
61    actions: { update },
62    meta: { inputRef },
63  } = use(ComposerContext)
64  return (
65    <TextInput
66      ref={inputRef}
67      value={state.input}
68      onChangeText={(text) => update((s) => ({ ...s, input: text }))}
69    />
70  )
71}
72 
73function ComposerSubmit() {
74  const {
75    actions: { submit },
76  } = use(ComposerContext)
77  return <Button onPress={submit}>Send</Button>
78}
79 
80// Export as compound component
81const Composer = {
82  Provider: ComposerProvider,
83  Frame: ComposerFrame,
84  Input: ComposerInput,
85  Submit: ComposerSubmit,
86  Header: ComposerHeader,
87  Footer: ComposerFooter,
88  Attachments: ComposerAttachments,
89  Formatting: ComposerFormatting,
90  Emojis: ComposerEmojis,
91}
92```
93 
94**Usage:**
95 
96```tsx
97<Composer.Provider state={state} actions={actions} meta={meta}>
98  <Composer.Frame>
99    <Composer.Header />
100    <Composer.Input />
101    <Composer.Footer>
102      <Composer.Formatting />
103      <Composer.Submit />
104    </Composer.Footer>
105  </Composer.Frame>
106</Composer.Provider>
107```
108 
109Consumers explicitly compose exactly what they need. No hidden conditionals. And the state, actions and meta are dependency-injected by a parent provider, allowing multiple usages of the same component structure.
110