Class-to-Function Component Codemod

Name: class-to-function-component codemod
Availability: InStock

🚀 Transform React class components to modern functional components with hooks

This repository contains a powerful codemod that automatically converts React class components to functional components, handling complex transformations including state management, lifecycle methods, refs, and context usage.

✨ Features

Complete class-to-function transformation - Converts React.Component and React.PureComponent to functional components
Smart state management - Transforms this.state and this.setState to useState hooks
Lifecycle method conversion - Converts componentDidMount, componentDidUpdate, etc. to useEffect hooks
Ref handling - Transforms createRef and this.refName to useRef hooks
Context integration - Converts this.context to useContext hooks
Event handler optimization - Transforms class methods to optimized event handlers
Optional AI Review - AI-powered code review and fixes (requires OpenAI API key)
TypeScript support - Full TypeScript type preservation and enhancement

🚀 Quick Start

Basic Usage (No AI Required)

bash

AI-Enhanced Usage (Optional)

bash

📖 Detailed Usage

Command Options

Option	Type	Default	Description
`--param autoAiReview=true`	boolean	`false`	Enable AI code review (requires `LLM_API_KEY`)
`--target <PATH>`	string	current directory	Directory to transform
`--dry-run`	boolean	`false`	Preview changes without applying
`--verbose`	boolean	`false`	Show detailed output

Examples

Example 1: Simple Counter Component

Before:

tsx

After:

tsx

Example 2: Component with Context and Refs

Before:

tsx

After:

tsx

AI Review Features

When you enable AI review with --autoAiReview=true, the AI will:

✅ Fix dependency arrays in useEffect hooks
✅ Optimize event handlers with useCallback
✅ Add missing dependencies to prevent stale closures
✅ Improve performance with useMemo where appropriate
✅ Fix TypeScript types and add proper type annotations
✅ Format code according to best practices
✅ Detect and fix common React patterns

Setting up AI Review

Get an OpenAI API Key:
- Visit OpenAI Platform
- Create a new API key
- Copy the key
Set Environment Variable:
```
bash
```
Run with AI:
```
bash
```

🛠️ Development

bash

🐛 Troubleshooting

Common Issues

"No files found to transform"

bash

"AI review failed"

bash

TypeScript compilation errors

bash

More Examples

For more detailed examples and advanced usage patterns, see USAGE.md.

Contributing

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

MIT License - see LICENSE file for details.

Registry

Ready to contribute?

class-to-function-component

Run locally