{"id":15676662,"url":"https://github.com/shadowtime2000/react-class-functional","last_synced_at":"2025-03-30T06:28:23.490Z","repository":{"id":143808196,"uuid":"290088332","full_name":"shadowtime2000/react-class-functional","owner":"shadowtime2000","description":"A Babel plugin to convert React class components to functional components","archived":false,"fork":false,"pushed_at":"2020-10-01T22:12:30.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T13:05:02.034Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-class-functional","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shadowtime2000.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-25T02:09:48.000Z","updated_at":"2020-10-01T22:12:32.000Z","dependencies_parsed_at":null,"dependency_job_id":"e799a425-35dc-4e9b-84cc-7b3e9e7be799","html_url":"https://github.com/shadowtime2000/react-class-functional","commit_stats":{"total_commits":3,"total_committers":1,"mean_commits":3.0,"dds":0.0,"last_synced_commit":"be0318a7e316df94e675a6b751110081436be8de"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadowtime2000%2Freact-class-functional","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadowtime2000%2Freact-class-functional/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadowtime2000%2Freact-class-functional/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shadowtime2000%2Freact-class-functional/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shadowtime2000","download_url":"https://codeload.github.com/shadowtime2000/react-class-functional/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246285654,"owners_count":20752947,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-03T16:04:38.975Z","updated_at":"2025-03-30T06:28:23.469Z","avatar_url":"https://github.com/shadowtime2000.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-class-functional\nA Babel plugin to convert React class components to functional components\n\n**WARNING** I wouldn't recommend using this as anyother Babel plugin in your workflow, because this does not convert everything and you will most likely need to do cleaning up and such especially if your component is very complex.\n\nThis Babel plugin can convert this:\n```javascript\nimport React from \"react\";\n\nconst Hey = React.createClass({\n  componentDidMount() {\n    console.log(\"a\");\n    console.log(\"b\");\n  },\n\n  render() {\n    return React.createElement(\"div\", null, \"Hey!\");\n  },\n});\n\nexport default Hey;\n```\nto this:\n```javascript\nimport React from \"react\";\n\nfunction Hey(props) {\n  function componentDidMount() {\n    console.log(\"a\");\n    console.log(\"b\");\n  }\n\n  useEffect(componentDidMount);\n  return React.createElement(\n    \"div\",\n    null,\n    \"Hey!\"\n  );\n}\n\nexport default Hey;\n```\n\n# Installation\n`npm i react-class-functional`\n\n## Usage\n\nIt is highly recommended to write a script like `runOnComponent.js` to convert your components. Your components cannot use ES6 class statements so make sure you have something to convert it to `const componentNameHere = React.createClass({dataHere})`. You cannot use normal JSX expressions so you should probably use a tool like `babel-plugin-transform-react-jsx` to convert JSX to `React.createElement` statements.\n\n# Contributing\nIf you want to add a new feature or integrate more hooks you can just open a pull request.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshadowtime2000%2Freact-class-functional","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshadowtime2000%2Freact-class-functional","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshadowtime2000%2Freact-class-functional/lists"}