0
# Information Extraction
1

2
Handlers that extract specific types of information from React components during the parsing process.
3

4
## Capabilities
5

6
### Handler Interface
7

8
The base interface for all information extraction handlers.
9

10
```typescript { .api }
11
type Handler = (
12
  documentation: Documentation,
13
  componentDefinition: NodePath<ComponentNode>
14
) => void;
15
```
16

17
Handlers receive a Documentation object (to populate) and a ComponentNodePath (to analyze), and modify the documentation object in place.
18

19
### Component Docblock Handler
20

21
Extracts JSDoc comments and descriptions from the component definition.
22

23
```typescript { .api }
24
const componentDocblockHandler: Handler;
25
```
26

27
**Extracted Information:**
28
- Component description from JSDoc comments
29
- @deprecated tags
30
- @since tags
31
- Other JSDoc annotations
32

33
**Usage Example:**
34

35
```typescript
36
// Input component:
37
/**
38
 * A reusable button component for user interactions
39
 * @deprecated Use Button2 instead
40
 */
41
export default function Button(props) {
42
  return <button {...props} />;
43
}
44

45
// Extracted documentation:
46
{
47
  description: "A reusable button component for user interactions",
48
  // Additional JSDoc metadata
49
}
50
```
51

52
### Display Name Handler
53

54
Extracts the display name of the component from various sources.
55

56
```typescript { .api }
57
const displayNameHandler: Handler;
58
```
59

60
**Sources for Display Name:**
61
- Explicit `displayName` property
62
- Function/class name
63
- Variable name in assignments
64
- Export name
65

66
**Usage Example:**
67

68
```typescript
69
// Various display name sources:
70
function MyButton() {} // displayName: "MyButton"
71
const Button = () => {}; // displayName: "Button"
72
export { Button as PrimaryButton }; // displayName: "PrimaryButton"
73

74
Button.displayName = "CustomButton"; // displayName: "CustomButton"
75
```
76

77
### Prop Type Handler
78

79
Extracts PropTypes definitions and converts them to documentation format.
80

81
```typescript { .api }
82
const propTypeHandler: Handler;
83
```
84

85
**Supported PropTypes:**
86
- Basic types (string, number, bool, array, object, func, node, element)
87
- Complex types (arrayOf, objectOf, oneOf, oneOfType, shape, exact)
88
- Custom validators
89
- Required props using `.isRequired`
90

91
**Usage Example:**
92

93
```typescript
94
import PropTypes from 'prop-types';
95

96
function Button({ label, onClick, size }) {
97
  return <button onClick={onClick}>{label}</button>;
98
}
99

100
Button.propTypes = {
101
  label: PropTypes.string.isRequired,
102
  onClick: PropTypes.func,
103
  size: PropTypes.oneOf(['small', 'medium', 'large'])
104
};
105

106
// Extracted documentation includes detailed prop information
107
```
108

109
### Default Props Handler
110

111
Extracts default prop values from various definition patterns.
112

113
```typescript { .api }
114
const defaultPropsHandler: Handler;
115
```
116

117
**Supported Patterns:**
118
- `Component.defaultProps` assignments
119
- ES6 default parameters
120
- Default values in destructuring
121

122
**Usage Example:**
123

124
```typescript
125
// defaultProps assignment
126
Button.defaultProps = {
127
  size: 'medium',
128
  disabled: false
129
};
130

131
// ES6 default parameters
132
function Button({ label, size = 'medium', disabled = false }) {}
133

134
// Both patterns are extracted to defaultValue in PropDescriptor
135
```
136

137
### Code Type Handler
138

139
Extracts TypeScript and Flow type information from component definitions.
140

141
```typescript { .api }
142
const codeTypeHandler: Handler;
143
```
144

145
**Supported Type Systems:**
146
- TypeScript interfaces and types
147
- Flow type annotations
148
- Generic type parameters
149
- Union and intersection types
150

151
**Usage Example:**
152

153
```typescript
154
interface ButtonProps {
155
  /** Button label text */
156
  label: string;
157
  /** Click handler function */
158
  onClick?: () => void;
159
  /** Button size variant */
160
  size?: 'small' | 'medium' | 'large';
161
}
162

163
function Button({ label, onClick, size }: ButtonProps) {
164
  return <button onClick={onClick}>{label}</button>;
165
}
166

167
// Extracts complete TypeScript type information
168
```
169

170
### Component Methods Handler
171

172
Extracts class component methods and their signatures.
173

174
```typescript { .api }
175
const componentMethodsHandler: Handler;
176
```
177

178
**Extracted Information:**
179
- Method names and signatures
180
- Parameter types and names
181
- Return types
182
- Method modifiers (static, async, etc.)
183

184
**Usage Example:**
185

186
```typescript
187
class MyComponent extends React.Component {
188
  /**
189
   * Handles user click events
190
   */
191
  handleClick = (event) => {
192
    // Method implementation
193
  };
194

195
  /**
196
   * Validates component props
197
   */
198
  static validateProps(props) {
199
    return props.isValid;
200
  }
201

202
  render() {
203
    return <div onClick={this.handleClick} />;
204
  }
205
}
206

207
// Extracts method information including JSDoc
208
```
209

210
### Component Methods JSDoc Handler
211

212
Extracts JSDoc documentation specifically from component methods.
213

214
```typescript { .api }
215
const componentMethodsJsDocHandler: Handler;
216
```
217

218
**Extracted Information:**
219
- Method descriptions
220
- Parameter documentation with @param tags
221
- Return value documentation with @returns tags
222
- Method-specific JSDoc tags
223

224
### Prop Docblock Handler
225

226
Extracts JSDoc comments associated with individual props.
227

228
```typescript { .api }
229
const propDocblockHandler: Handler;
230
```
231

232
**Usage Example:**
233

234
```typescript
235
Button.propTypes = {
236
  /** The text to display on the button */
237
  label: PropTypes.string.isRequired,
238
  /** Function called when button is clicked */
239
  onClick: PropTypes.func,
240
  /** Visual size of the button */
241
  size: PropTypes.oneOf(['small', 'medium', 'large'])
242
};
243

244
// Extracts individual prop descriptions
245
```
246

247
### Prop Type Composition Handler
248

249
Handles composed PropTypes and HOC prop inheritance patterns.
250

251
```typescript { .api }
252
const propTypeCompositionHandler: Handler;
253
```
254

255
**Handles:**
256
- PropTypes composition with `Object.assign`
257
- HOC prop merging patterns
258
- Mixin prop inheritance
259

260
### Context Type Handlers
261

262
Extract React context information from components.
263

264
```typescript { .api }
265
const contextTypeHandler: Handler;
266
const childContextTypeHandler: Handler;
267
```
268

269
**Extracted Information:**
270
- Context types consumed by the component
271
- Child context types provided by the component
272
- Context property descriptions
273

274
**Usage Example:**
275

276
```typescript
277
class MyComponent extends React.Component {
278
  static contextTypes = {
279
    theme: PropTypes.object.isRequired
280
  };
281

282
  static childContextTypes = {
283
    locale: PropTypes.string
284
  };
285

286
  getChildContext() {
287
    return { locale: 'en-US' };
288
  }
289
}
290

291
// Extracts context type information
292
```
293

294
### Default Handler Configuration
295

296
The default set of handlers used by the parser.
297

298
```typescript { .api }
299
const defaultHandlers: Handler[];
300
```
301

302
The default handlers include (in order):
303
1. `propTypeHandler` - Extract PropTypes
304
2. `contextTypeHandler` - Extract context types  
305
3. `childContextTypeHandler` - Extract child context types
306
4. `propTypeCompositionHandler` - Handle prop composition
307
5. `propDocblockHandler` - Extract prop JSDoc
308
6. `codeTypeHandler` - Extract TypeScript/Flow types
309
7. `defaultPropsHandler` - Extract default values
310
8. `componentDocblockHandler` - Extract component JSDoc
311
9. `displayNameHandler` - Extract display name
312
10. `componentMethodsHandler` - Extract methods
313
11. `componentMethodsJsDocHandler` - Extract method JSDoc
314

315
### Custom Handler Development
316

317
Handlers are functions that modify the Documentation object based on AST analysis.
318

319
**Handler Implementation Example:**
320

321
```typescript
322
import type { Handler } from "react-docgen";
323

324
const customHandler: Handler = (documentation, componentDefinition) => {
325
  // Analyze the componentDefinition AST node
326
  // Extract specific information
327
  // Modify the documentation object
328
  
329
  documentation.set('customField', extractedValue);
330
};
331

332
// Usage with custom handler
333
const docs = parse(sourceCode, {
334
  handlers: [...defaultHandlers, customHandler]
335
});
336
```