49:I[660678,["/_next/static/chunks/13vqyfldau57p.js","/_next/static/chunks/1gbl-dcot4vlq.js","/_next/static/chunks/2ugxrg8mt6ccc.js","/_next/static/chunks/06u_dm-_ph36_.js","/_next/static/chunks/0cnrn8dx8wpm6.js","/_next/static/chunks/2e4udl7tfg2xd.js","/_next/static/chunks/3erz2--ndwlxz.js","/_next/static/chunks/0pp6seif9t0rh.js","/_next/static/chunks/40fmu66fmb8tm.js","/_next/static/chunks/1sh719482-5um.js","/_next/static/chunks/2i4xo8xu-dpuk.js","/_next/static/chunks/1gth09_ur0iam.js","/_next/static/chunks/2wyk4b1ao4pa_.js","/_next/static/chunks/3vehc-g2atkra.js","/_next/static/chunks/0ugk39ckud30x.js","/_next/static/chunks/2a4jc680f5x-9.js","/_next/static/chunks/44c_5nh0vyeb5.js","/_next/static/chunks/0r86cplnpkdza.js","/_next/static/chunks/1jiredr0b6jr_.js","/_next/static/chunks/3inhpdbyfua_r.js","/_next/static/chunks/1qsa_rj-5yj90.js","/_next/static/chunks/3s8x8w7a2lgsa.js","/_next/static/chunks/2md3whhhv655w.js","/_next/static/chunks/1_5ue0bs85y9-.js","/_next/static/chunks/39r5jk4yvppc5.js","/_next/static/chunks/3-906s1ue5fj3.js","/_next/static/chunks/2t_5zfez2-77k.js","/_next/static/chunks/3v9yse6gfm876.js","/_next/static/chunks/2ghxk472-g0i6.js","/_next/static/chunks/3t7z44cjl4fyh.js","/_next/static/chunks/0meqi_44gz4np.js","/_next/static/chunks/2641m2aqdum9a.js","/_next/static/chunks/0ojgzwcpt7vsk.js","/_next/static/chunks/2l8l4_a9-xhts.js","/_next/static/chunks/2f0mnapfb6qc-.js","/_next/static/chunks/04zz8eh1956za.js"],"HydrationBoundary"] 48:T9f2,{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://app.codemod.com/registry#website","url":"https://app.codemod.com/registry","name":"Codemod Registry"},{"@type":"Organization","@id":"https://app.codemod.com#org","name":"Kourosh Homayouni ","url":"https://app.codemod.com","logo":"https://avatars.githubusercontent.com/u/91155769?v=4"},{"@type":"BreadcrumbList","@id":"https://app.codemod.com/registry/class-to-function-component#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Registry","item":"https://app.codemod.com/registry"},{"@type":"ListItem","position":2,"name":"class-to-function-component","item":"https://app.codemod.com/registry/class-to-function-component"}]},{"@type":"WebPage","@id":"https://app.codemod.com/registry/class-to-function-component#webpage","url":"https://app.codemod.com/registry/class-to-function-component","name":"class-to-function-component - Codemod Registry","description":"Transform React class components to modern function components","isPartOf":{"@id":"https://app.codemod.com/registry#website"},"author":{"@id":"https://app.codemod.com#org"},"breadcrumb":{"@id":"https://app.codemod.com/registry/class-to-function-component#breadcrumb"},"mainEntity":{"@id":"https://app.codemod.com/registry/class-to-function-component#sourcecode"}},{"@type":"SoftwareSourceCode","@id":"https://app.codemod.com/registry/class-to-function-component#sourcecode","name":"class-to-function-component","description":"Transform React class components to modern function components","url":"https://app.codemod.com/registry/class-to-function-component","publisher":{"@id":"https://app.codemod.com#org"},"image":"https://avatars.githubusercontent.com/u/91155769?v=4","isAccessibleForFree":true,"license":"MIT","version":"0.1.7","keywords":["react","transformation","migration","class-component","function-component","hooks"],"datePublished":"2025-10-06 21:44:55.883045+00","dateModified":"2026-01-24 01:50:30.886815+00"},{"@type":"SoftwareApplication","@id":"https://app.codemod.com/registry/class-to-function-component#app","name":"class-to-function-component codemod","description":"Transform React class components to modern function components","url":"https://app.codemod.com/registry/class-to-function-component","publisher":{"@id":"https://app.codemod.com#org"},"softwareVersion":"0.1.7","applicationCategory":"DeveloperApplication","operatingSystem":"Cross-platform","offers":{"@type":"Offer","price":"0","priceCurrency":"USD","availability":"https://schema.org/InStock"}}]}4a:T1a8f,# Class-to-Function Component Codemod 🚀 **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 # Transform all JavaScript/TypeScript files in your project npx codemod@latest workflow run --workflow workflow.yaml # Transform specific directory npx codemod@latest workflow run --workflow workflow.yaml --target src/components # Preview changes without applying them npx codemod@latest workflow run --workflow workflow.yaml --dry-run ``` ### AI-Enhanced Usage (Optional) ```bash # Set your OpenAI API key export LLM_API_KEY="your-openai-api-key" # Run with AI review for better results npx codemod@latest workflow run --workflow workflow.yaml --param autoAiReview=true ``` ## 📖 Detailed Usage ### Command Options | Option | Type | Default | Description | |--------|------|---------|-------------| | `--param autoAiReview=true` | boolean | `false` | Enable AI code review (requires `LLM_API_KEY`) | | `--target ` | 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 import React, { Component } from 'react'; class Counter extends Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() { console.log('Counter mounted'); } increment = () => { this.setState(prevState => ({ count: prevState.count + 1 })); } render() { return (

Count: {this.state.count}

); } } ``` **After:** ```tsx import React from 'react'; function Counter() { const [count, setCount] = React.useState(0); React.useEffect(() => { console.log('Counter mounted'); }, []); const increment = () => { setCount(prevCount => prevCount + 1); } return (

Count: {count}

); } ``` #### Example 2: Component with Context and Refs **Before:** ```tsx import React, { Component, createRef } from 'react'; import { UserContext } from './UserContext'; class UserProfile extends Component { static contextType = UserContext; private inputRef = createRef(); componentDidMount() { this.inputRef.current?.focus(); } handleSubmit = () => { const user = this.context; console.log('User:', user); } render() { const user = this.context; return ( ); } } ``` **After:** ```tsx import React, { useRef, useContext } from 'react'; import { UserContext } from './UserContext'; function UserProfile() { const user = useContext(UserContext); const inputRef = useRef(null); React.useEffect(() => { inputRef.current?.focus(); }, []); const handleSubmit = () => { console.log('User:', user); } return ( ); } ``` ## 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 1. **Get an OpenAI API Key:** - Visit [OpenAI Platform](https://platform.openai.com/api-keys) - Create a new API key - Copy the key 2. **Set Environment Variable:** ```bash # Linux/Mac export LLM_API_KEY="sk-your-api-key-here" # Windows (PowerShell) $env:LLM_API_KEY="sk-your-api-key-here" # Windows (Command Prompt) set LLM_API_KEY=sk-your-api-key-here ``` 3. **Run with AI:** ```bash npx codemod@latest workflow run --workflow workflow.yaml --param autoAiReview=true ``` ## 🛠️ Development ```bash # Clone and setup git clone cd class-to-function-component npm install # Test the transformation npm test # Validate the workflow npx codemod@latest workflow validate workflow.yaml # Run locally npx codemod@latest workflow run --workflow workflow.yaml ``` ## 🐛 Troubleshooting ### Common Issues **"No files found to transform"** ```bash # Check if files match the pattern npx codemod@latest workflow run --workflow workflow.yaml --dry-run --verbose # Use specific target directory npx codemod@latest workflow run --workflow workflow.yaml --target src ``` **"AI review failed"** ```bash # Check API key is set echo $LLM_API_KEY # Run without AI review (default behavior) npx codemod@latest workflow run --workflow workflow.yaml ``` **TypeScript compilation errors** ```bash # Use AI review to fix types npx codemod@latest workflow run --workflow workflow.yaml --param autoAiReview=true # Check TypeScript version npx tsc --version ``` ## More Examples For more detailed examples and advanced usage patterns, see [USAGE.md](./USAGE.md). ## Contributing 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/amazing-feature`) 3. Commit your changes (`git commit -m 'Add some amazing feature'`) 4. Push to the branch (`git push origin feature/amazing-feature`) 5. Open a Pull Request ## 📄 License MIT License - see [LICENSE](LICENSE) file for details. 1a:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$48"}}],["$","$L49",null,{"state":{"mutations":[],"queries":[{"dehydratedAt":1790028664883,"state":{"data":{"json":{"id":"213ffcc5-ce9f-47b7-b200-5423de972a66","name":"class-to-function-component","displayName":"class-to-function-component","description":"Transform React class components to modern function components","scope":null,"visibility":"public","downloadCount":328,"executionCount":530,"createdAt":"2025-10-06 21:44:55.883045+00","updatedAt":"2026-01-24 01:50:30.886815+00","latestVersion":"0.1.7","keywords":["react","transformation","migration","class-component","function-component","hooks"],"starCount":3,"author":"kouroshko","homepage":null,"repository":null,"license":"MIT","access":"public","documentation":null,"bugsUrl":null,"readme":"$4a","organization":{"id":null,"name":null,"slug":null,"avatarUrl":null},"owner":{"id":"09505494-a602-436b-9d18-5f526b9d3cf5","username":"kouroshko","name":"Kourosh Homayouni ","avatarUrl":"https://avatars.githubusercontent.com/u/91155769?v=4"},"isLegacy":false,"versions":[{"version":{"id":"92219c06-80c1-4dd1-a023-b0959a641005","packageId":"213ffcc5-ce9f-47b7-b200-5423de972a66","version":"0.1.7","description":"Transform React class components to modern function components","manifest":{"name":"class-to-function-component","author":"kouroshko","license":"MIT","targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"version":"0.1.7","category":"migration","keywords":["react","transformation","migration","class-component","function-component","hooks"],"registry":{"access":"public","visibility":"public"},"workflow":"workflow.yaml","description":"Transform React class components to modern function components","dependencies":[],"schema_version":"1.0"},"checksum":"7405579ee03cc6600274abde25580b5f4f1d0b6c8a3ce3bb72896e3fd958cbc1","size":54406,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/class-to-function-component/0.1.7/public.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"languages":["typescript"],"frameworks":[]},"dependencies":[],"languages":["tsx"],"stepTypes":["js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Transform React class components to function components","type":"js-ast-grep","language":"tsx"}]},{"id":"ai-review","name":"AI Review","steps":[{"name":"AI Code Review","type":"ai"}]}]},"validated":false,"validationErrors":null,"publishedBy":"09505494-a602-436b-9d18-5f526b9d3cf5","deprecated":false,"deprecationMessage":null,"downloadCount":187,"cachedTestCases":null,"defaultWorkflowName":"default","createdAt":"2026-01-24T01:50:30.886Z","updatedAt":"2026-09-21 16:25:05.272738+00"},"publishedBy":{"id":"09505494-a602-436b-9d18-5f526b9d3cf5","username":"kouroshko","name":"Kourosh Homayouni "},"insightsTemplate":{"packageVersionId":"92219c06-80c1-4dd1-a023-b0959a641005","status":"ready","generatedAt":"2026-07-21T15:58:38.140Z"},"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":["tsx"],"stepTypes":["js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Transform React class components to function components","type":"js-ast-grep","language":"tsx"}]},{"id":"ai-review","name":"AI Review","steps":[{"name":"AI Code Review","type":"ai"}]}]}}],"packageBehavior":"workflow-only","isBundle":false,"bundleChildren":[],"parentBundles":[]},{"version":{"id":"80b7ac45-6089-4014-baf5-950911f3717a","packageId":"213ffcc5-ce9f-47b7-b200-5423de972a66","version":"0.1.6","description":"Transform React class components to modern function components","manifest":{"name":"class-to-function-component","author":"kouroshko","license":"MIT","targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"version":"0.1.6","category":"migration","keywords":["react","transformation","migration","class-component","function-component","hooks"],"registry":{"access":"public","visibility":"public"},"workflow":"workflow.yaml","description":"Transform React class components to modern function components","dependencies":[],"schema_version":"1.0"},"checksum":"0c299572497cc779dfe39a8bb504aec7bb689c8653b92b685f70fee0536a0618","size":52169,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/class-to-function-component/0.1.6/public.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"dependencies":[],"languages":["tsx"],"stepTypes":["js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Transform React class components to function components","type":"js-ast-grep","language":"tsx"}]},{"id":"ai-review","name":"AI Review","steps":[{"name":"AI Code Review","type":"ai"}]}]},"validated":true,"validationErrors":null,"publishedBy":"09505494-a602-436b-9d18-5f526b9d3cf5","deprecated":false,"deprecationMessage":null,"downloadCount":85,"cachedTestCases":null,"defaultWorkflowName":"default","createdAt":"2025-10-24T17:40:37.648Z","updatedAt":"2026-09-06 12:28:59.210654+00"},"publishedBy":{"id":"09505494-a602-436b-9d18-5f526b9d3cf5","username":"kouroshko","name":"Kourosh Homayouni "},"insightsTemplate":null,"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":["tsx"],"stepTypes":["js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Transform React class components to function components","type":"js-ast-grep","language":"tsx"}]},{"id":"ai-review","name":"AI Review","steps":[{"name":"AI Code Review","type":"ai"}]}]}}],"packageBehavior":"workflow-only","isBundle":false,"bundleChildren":[],"parentBundles":[]},{"version":{"id":"282a34ab-a783-4af2-a450-d7538a133a6e","packageId":"213ffcc5-ce9f-47b7-b200-5423de972a66","version":"0.1.5","description":"Transform React class components to modern function components","manifest":{"name":"class-to-function-component","author":"kouroshko","license":"MIT","targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"version":"0.1.5","category":"migration","keywords":["react","transformation","migration","class-component","function-component","hooks"],"registry":{"access":"public","visibility":"public"},"workflow":"workflow.yaml","description":"Transform React class components to modern function components","dependencies":[],"schema_version":"1.0"},"checksum":"0adbcefb87b0fd047128b2d6e24b9c4f3ac7b726a5913166ff32240283593ba8","size":51754,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/class-to-function-component/0.1.5/public.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"dependencies":[],"languages":["tsx"],"stepTypes":["js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Transform React class components to function components","type":"js-ast-grep","language":"tsx"}]},{"id":"ai-review","name":"AI Review","steps":[{"name":"AI Code Review","type":"ai"}]}]},"validated":true,"validationErrors":null,"publishedBy":"09505494-a602-436b-9d18-5f526b9d3cf5","deprecated":false,"deprecationMessage":null,"downloadCount":7,"cachedTestCases":null,"defaultWorkflowName":"default","createdAt":"2025-10-24T17:24:43.828Z","updatedAt":"2026-09-06 12:28:59.250772+00"},"publishedBy":{"id":"09505494-a602-436b-9d18-5f526b9d3cf5","username":"kouroshko","name":"Kourosh Homayouni "},"insightsTemplate":null,"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":["tsx"],"stepTypes":["js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Transform React class components to function components","type":"js-ast-grep","language":"tsx"}]},{"id":"ai-review","name":"AI Review","steps":[{"name":"AI Code Review","type":"ai"}]}]}}],"packageBehavior":"workflow-only","isBundle":false,"bundleChildren":[],"parentBundles":[]},{"version":{"id":"016aa817-3334-422b-b9f4-3b59b282d658","packageId":"213ffcc5-ce9f-47b7-b200-5423de972a66","version":"0.1.4","description":"Transform React class components to modern function components","manifest":{"name":"class-to-function-component","author":"kouroshko","license":"MIT","targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"version":"0.1.4","category":"migration","keywords":["react","transformation","migration","class-component","function-component","hooks"],"registry":{"access":"public","visibility":"public"},"workflow":"workflow.yaml","description":"Transform React class components to modern function components","dependencies":[],"schema_version":"1.0"},"checksum":"ad16483b7ece679fd6c0dd15366904daa36ed42ce53cbc48bf5074e5b9433822","size":51499,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/class-to-function-component/0.1.4/public.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"dependencies":[],"languages":["tsx"],"stepTypes":["js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Transform React class components to function components","type":"js-ast-grep","language":"tsx"}]},{"id":"ai-review","name":"AI Review","steps":[{"name":"AI Code Review","type":"ai"}]}]},"validated":true,"validationErrors":null,"publishedBy":"09505494-a602-436b-9d18-5f526b9d3cf5","deprecated":false,"deprecationMessage":null,"downloadCount":7,"cachedTestCases":null,"defaultWorkflowName":"default","createdAt":"2025-10-24T17:22:10.554Z","updatedAt":"2026-09-06 12:28:59.320855+00"},"publishedBy":{"id":"09505494-a602-436b-9d18-5f526b9d3cf5","username":"kouroshko","name":"Kourosh Homayouni "},"insightsTemplate":null,"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":["tsx"],"stepTypes":["js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Transform React class components to function components","type":"js-ast-grep","language":"tsx"}]},{"id":"ai-review","name":"AI Review","steps":[{"name":"AI Code Review","type":"ai"}]}]}}],"packageBehavior":"workflow-only","isBundle":false,"bundleChildren":[],"parentBundles":[]},{"version":{"id":"33db9104-f3a4-4505-9c26-7b76dd73c6f0","packageId":"213ffcc5-ce9f-47b7-b200-5423de972a66","version":"0.1.3","description":"Transform React class components to modern function components","manifest":{"name":"class-to-function-component","author":"kouroshko","license":"MIT","targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"version":"0.1.3","category":"migration","keywords":["react","transformation","migration","class-component","function-component","hooks"],"registry":{"access":"public","visibility":"public"},"workflow":"workflow.yaml","description":"Transform React class components to modern function components","dependencies":[],"schema_version":"1.0"},"checksum":"4bfc21be4c688aba8dab8e4d44d6bae379bfb942f4aed4e01863bdf24b1e86ae","size":51304,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/class-to-function-component/0.1.3/public.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"dependencies":[],"languages":["tsx"],"stepTypes":["js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Transform React class components to function components","type":"js-ast-grep","language":"tsx"}]},{"id":"ai-review","name":"AI Review","steps":[{"name":"AI Code Review","type":"ai"}]}]},"validated":true,"validationErrors":null,"publishedBy":"09505494-a602-436b-9d18-5f526b9d3cf5","deprecated":false,"deprecationMessage":null,"downloadCount":7,"cachedTestCases":null,"defaultWorkflowName":"default","createdAt":"2025-10-24T16:56:28.202Z","updatedAt":"2026-09-06 12:28:59.284209+00"},"publishedBy":{"id":"09505494-a602-436b-9d18-5f526b9d3cf5","username":"kouroshko","name":"Kourosh Homayouni "},"insightsTemplate":null,"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":["tsx"],"stepTypes":["js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Transform React class components to function components","type":"js-ast-grep","language":"tsx"}]},{"id":"ai-review","name":"AI Review","steps":[{"name":"AI Code Review","type":"ai"}]}]}}],"packageBehavior":"workflow-only","isBundle":false,"bundleChildren":[],"parentBundles":[]},{"version":{"id":"f33f21d8-381d-4e49-a1cf-024b03b6e7b7","packageId":"213ffcc5-ce9f-47b7-b200-5423de972a66","version":"0.1.2","description":"Transform React class components to modern function components","manifest":{"name":"class-to-function-component","author":"kouroshko","license":"MIT","targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"version":"0.1.2","category":"migration","keywords":["react","transformation","migration","class-component","function-component","hooks"],"registry":{"access":"public","visibility":"public"},"workflow":"workflow.yaml","description":"Transform React class components to modern function components","dependencies":[],"schema_version":"1.0"},"checksum":"fcef26a904e22db2af3f454f21158034796d48a67bfa4bd198d1143601887a5b","size":51463,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/class-to-function-component/0.1.2/public.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"dependencies":[],"languages":["tsx"],"stepTypes":["js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Transform React class components to function components","type":"js-ast-grep","language":"tsx"}]},{"id":"ai-review","name":"AI Review","steps":[{"name":"AI Code Review","type":"ai"}]}]},"validated":true,"validationErrors":null,"publishedBy":"09505494-a602-436b-9d18-5f526b9d3cf5","deprecated":false,"deprecationMessage":null,"downloadCount":7,"cachedTestCases":null,"defaultWorkflowName":"default","createdAt":"2025-10-22T23:33:01.377Z","updatedAt":"2026-09-06 12:28:59.342381+00"},"publishedBy":{"id":"09505494-a602-436b-9d18-5f526b9d3cf5","username":"kouroshko","name":"Kourosh Homayouni "},"insightsTemplate":null,"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":["tsx"],"stepTypes":["js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Transform React class components to function components","type":"js-ast-grep","language":"tsx"}]},{"id":"ai-review","name":"AI Review","steps":[{"name":"AI Code Review","type":"ai"}]}]}}],"packageBehavior":"workflow-only","isBundle":false,"bundleChildren":[],"parentBundles":[]},{"version":{"id":"558c8759-b8c4-4cce-8787-d54d861509ab","packageId":"213ffcc5-ce9f-47b7-b200-5423de972a66","version":"0.1.1","description":"Transform React class components to modern function components","manifest":{"name":"class-to-function-component","author":"kouroshko","license":"MIT","targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"version":"0.1.1","category":"migration","keywords":["react","transformation","migration","class-component","function-component","hooks"],"registry":{"access":"public","visibility":"public"},"workflow":"workflow.yaml","description":"Transform React class components to modern function components","dependencies":[],"schema_version":"1.0"},"checksum":"dcb873b2f8d4f5645297cdc9bf6e985c16041a22b4d39ccff8338d8bf08f84ce","size":59363,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/class-to-function-component/0.1.1/public.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"dependencies":[],"languages":["tsx"],"stepTypes":["js-ast-grep"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Scan typescript files and apply fixes","type":"js-ast-grep","language":"tsx"}]}]},"validated":true,"validationErrors":null,"publishedBy":"09505494-a602-436b-9d18-5f526b9d3cf5","deprecated":false,"deprecationMessage":null,"downloadCount":21,"cachedTestCases":null,"defaultWorkflowName":"default","createdAt":"2025-10-08T23:15:12.731Z","updatedAt":"2026-09-06 12:28:59.526408+00"},"publishedBy":{"id":"09505494-a602-436b-9d18-5f526b9d3cf5","username":"kouroshko","name":"Kourosh Homayouni "},"insightsTemplate":null,"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":["tsx"],"stepTypes":["js-ast-grep"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Scan typescript files and apply fixes","type":"js-ast-grep","language":"tsx"}]}]}}],"packageBehavior":"workflow-only","isBundle":false,"bundleChildren":[],"parentBundles":[]},{"version":{"id":"86f3e000-51c8-456d-866b-d6da8f2cb068","packageId":"213ffcc5-ce9f-47b7-b200-5423de972a66","version":"0.1.0","description":"Transform React class components to modern function components","manifest":{"name":"class-to-function-component","author":"kouroshko","license":"MIT","targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"version":"0.1.0","category":"migration","keywords":["react","transformation","migration","class-component","function-component","hooks"],"registry":{"access":"public","visibility":"public"},"workflow":"workflow.yaml","description":"Transform React class components to modern function components","dependencies":[],"schema_version":"1.0"},"checksum":"f6281d9be98278ef0dfd8e5e899eb90121863ff2ca9b07cd9ef61bfb33dd44e5","size":58119,"downloadUrl":"https://registry-cdn.codemod.com/prod/packages/class-to-function-component/0.1.0/public.tar.gz","aiGenerated":false,"sourceArchiveS3Key":null,"targets":{"versions":{},"languages":["typescript","javascript","tsx","jsx"],"frameworks":[]},"dependencies":[],"languages":["tsx"],"stepTypes":["js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Scan typescript files and apply fixes","type":"js-ast-grep","language":"tsx"},{"name":"AI Review","type":"ai"}]}]},"validated":true,"validationErrors":null,"publishedBy":"09505494-a602-436b-9d18-5f526b9d3cf5","deprecated":false,"deprecationMessage":null,"downloadCount":7,"cachedTestCases":null,"defaultWorkflowName":"default","createdAt":"2025-10-06T21:44:55.883Z","updatedAt":"2026-09-06 12:28:59.967729+00"},"publishedBy":{"id":"09505494-a602-436b-9d18-5f526b9d3cf5","username":"kouroshko","name":"Kourosh Homayouni "},"insightsTemplate":null,"workflows":[{"name":"default","path":"workflow.yaml","description":null,"isDefault":true,"languages":["tsx"],"stepTypes":["js-ast-grep","ai"],"workflowMetadata":{"nodes":[{"id":"apply-transforms","name":"Apply AST Transformations","steps":[{"name":"Scan typescript files and apply fixes","type":"js-ast-grep","language":"tsx"},{"name":"AI Review","type":"ai"}]}]}}],"packageBehavior":"workflow-only","isBundle":false,"bundleChildren":[],"parentBundles":[]}],"distTags":{"latest":"0.1.7"},"latestPackageBehavior":"workflow-only","cachedTestCases":null},"meta":{"values":{"versions.0.version.createdAt":["Date"],"versions.0.insightsTemplate.generatedAt":["Date"],"versions.1.version.createdAt":["Date"],"versions.2.version.createdAt":["Date"],"versions.3.version.createdAt":["Date"],"versions.4.version.createdAt":["Date"],"versions.5.version.createdAt":["Date"],"versions.6.version.createdAt":["Date"],"versions.7.version.createdAt":["Date"]}}},"dataUpdateCount":1,"dataUpdatedAt":1790028664882,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":[["registry","getPackage"],{"input":{"name":"class-to-function-component","scope":"$undefined"},"type":"query"}],"queryHash":"[[\"registry\",\"getPackage\"],{\"input\":{\"name\":\"class-to-function-component\"},\"type\":\"query\"}]"}]},"children":"$L4b"}]] 1d:null 21:[["$","title","0",{"children":"class-to-function-component - Codemod Registry"}],["$","meta","1",{"name":"description","content":"Transform React class components to modern function components"}],["$","meta","2",{"name":"author","content":"Kourosh Homayouni "}],["$","meta","3",{"name":"keywords","content":"class-to-function-component, codemod, code transformation, automated refactoring, package, registry, react, transformation, migration, class-component, function-component, hooks"}],["$","meta","4",{"name":"creator","content":"Kourosh Homayouni "}],["$","meta","5",{"name":"publisher","content":"Codemod"}],["$","meta","6",{"name":"robots","content":"index, follow"}],["$","meta","7",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","8",{"name":"application-name","content":"Codemod Registry"}],["$","meta","9",{"name":"apple-mobile-web-app-title","content":"Codemod"}],["$","meta","10",{"name":"apple-mobile-web-app-capable","content":"yes"}],["$","meta","11",{"name":"apple-mobile-web-app-status-bar-style","content":"default"}],["$","meta","12",{"name":"format-detection","content":"telephone=no"}],["$","meta","13",{"name":"mobile-web-app-capable","content":"yes"}],["$","meta","14",{"name":"msapplication-config","content":"/browserconfig.xml"}],["$","meta","15",{"name":"msapplication-TileColor","content":"#000000"}],["$","meta","16",{"name":"msapplication-tap-highlight","content":"no"}],["$","meta","17",{"name":"theme-color","content":"#000000"}],["$","meta","18",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"}],["$","link","19",{"rel":"canonical","href":"https://app.codemod.com/registry/class-to-function-component"}],["$","meta","20",{"property":"og:title","content":"class-to-function-component - Codemod Registry"}],["$","meta","21",{"property":"og:description","content":"Transform React class components to modern function components"}],["$","meta","22",{"property":"og:url","content":"https://app.codemod.com/registry/class-to-function-component"}],["$","meta","23",{"property":"og:site_name","content":"Codemod Registry"}],["$","meta","24",{"property":"og:locale","content":"en_US"}],["$","meta","25",{"property":"og:image","content":"https://app.codemod.com/api/og/registry/class-to-function-component"}],["$","meta","26",{"property":"og:image:width","content":"1200"}],["$","meta","27",{"property":"og:image:height","content":"630"}],["$","meta","28",{"property":"og:image:alt","content":"class-to-function-component package"}],["$","meta","29",{"property":"og:type","content":"website"}],["$","meta","30",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","31",{"name":"twitter:site","content":"@codemod"}],["$","meta","32",{"name":"twitter:creator","content":"@codemod"}],["$","meta","33",{"name":"twitter:title","content":"class-to-function-component - Codemod Registry"}],["$","meta","34",{"name":"twitter:description","content":"Transform React class components to modern function components"}],["$","meta","35",{"name":"twitter:image","content":"https://app.codemod.com/api/og/registry/class-to-function-component"}]]