{"id":13679228,"url":"https://github.com/ricardoemerson/create-react-tsx-component","last_synced_at":"2025-04-29T18:31:54.532Z","repository":{"id":41423061,"uuid":"258840712","full_name":"ricardoemerson/create-react-tsx-component","owner":"ricardoemerson","description":"Create React TSX Component - Extension that creates React Component using Typescript with Styled Components.","archived":false,"fork":false,"pushed_at":"2025-04-14T02:24:50.000Z","size":25760,"stargazers_count":39,"open_issues_count":8,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-14T03:31:33.180Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://extensionshub.com.br","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ricardoemerson.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","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,"zenodo":null},"funding":{"custom":["https://www.paypal.com/donate?hosted_button_id=X26H7L6AVMD96","https://mpago.la/1LvP93a"]}},"created_at":"2020-04-25T18:01:49.000Z","updated_at":"2025-04-14T02:25:25.000Z","dependencies_parsed_at":"2024-01-14T14:57:51.360Z","dependency_job_id":"a4bea875-5a59-432f-a0c8-a4744dbec963","html_url":"https://github.com/ricardoemerson/create-react-tsx-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ricardoemerson%2Fcreate-react-tsx-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ricardoemerson%2Fcreate-react-tsx-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ricardoemerson%2Fcreate-react-tsx-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ricardoemerson%2Fcreate-react-tsx-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ricardoemerson","download_url":"https://codeload.github.com/ricardoemerson/create-react-tsx-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251560023,"owners_count":21609125,"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-08-02T13:01:03.351Z","updated_at":"2025-04-29T18:31:54.525Z","avatar_url":"https://github.com/ricardoemerson.png","language":null,"funding_links":["https://www.paypal.com/donate?hosted_button_id=X26H7L6AVMD96","https://mpago.la/1LvP93a"],"categories":["Others"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cbr /\u003e\n  \u003ca title=\"Learn more about React Tools\" href=\"https://github.com/ricardoemerson/create-react-tsx-component\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/master/images/cover-logo.png\" alt=\"React Tools Logo\" width=\"256\"  heigth=\"256\"/\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n# What's new in React Tools 1.12.0\n\n## ✨Important Update: License Change for the Extension\n\nThe React Tools extension is now fully paid. Since its launch, this extension has been designed to streamline and\nenhance React development in Visual Studio Code. Initially offered for free, then under a freemium model, we are now\ntaking the next step to ensure its sustainability and continued development.\n\n### 💡 Why this change?\n\nMaintaining and improving an extension like React Tools requires ongoing time and resources. With the paid model, we\ncan:\n\n✅ Continuously improve and add new features.  \n✅ Provide better support for users.  \n✅ Deliver regular updates to keep the extension compatible with new versions of React and Visual Studio Code.\n\n### 🔑 How to get your subscription?\n\nTo continue using React Tools Pro and gain access to\nexclusive features like advanced framework support, custom template\ngeneration, and much more, you can purchase a paid license through the [Extensions Hub](https://extensionshub.com.br),\nwhere we offer flexible payment options.\n\n### How to get started?\n\nVisit [https://extensionshub.com.br](https://extensionshub.com.br) now, where you can choose your plan, and unlock all\npremium\nfeatures in just a few clicks.\n\n#### How to Register Your Subscription\n\nReady to unlock the premium features of **React Tools Pro** in Visual Studio Code? Follow these simple steps to\nregister your subscription\nusing your subscription key:\n\n1. **Open the Command Palette**\n\n- In Visual Studio Code, press `Ctrl + Shift + P` (Windows/Linux) or `Cmd + Shift + P` (Mac) to open the Command\n  Palette.\n\n2. **Select the Subscription Option in the Command Palette**\n\n- Type \"React Tools Pro\" and select:  \n  ✏️ **Add/Update Subscription Key for React Tools Pro**\n\n3. **Enter Your Subscription Key that you copied from Extensions Hub**\n\n- A text input will appear. Paste the subscription key you received after purchasing your plan\n  at [https://extensionshub.com.br](https://extensionshub.com.br).\n- Press `Enter` to submit.\n\n4. **Name Your Device**\n\n- Another input will pop up. Enter a name for your device (e.g., \"Work Laptop\" or \"Home PC\") to help you identify it\n  later.\n- Press `Enter` to confirm.\n\n5. **Enjoy Premium Features!**\n\n- Once validated, you’ll have instant access to all **Pro features 🎖️**. Start boosting your React workflow right\n  away!\n\n🙌 Thank you for your support!\n\nWe recognize that this change, making the extension fully paid, may impact some users, but we believe it will allow the\nextension to\ncontinue growing and providing even more value to the React community.\n\nThank you for being part of this journey! If you have any questions, feel free to reach out. 🚀\n!\n\nBest regards,\n\n**Ricardo Emerson**    \nExtensions Hub Team\n---\n\n# What's new in React Tools 1.10.0\n\n- Added to setting `stylesFormat` the option `CVA - Class Variance Authority` to allow create complex components using\n  this package.\n\n  To use `CVA - Class Variance Authority` you need to add to your `package.json` the packages:\n  - `class-variance-authority`;\n  - `clsx`;\n  - `tailwind-merge`.\n\nAnd create this function in `src/services/tailwind-css-util.ts`:\n\n  ```ts\n  import {ClassValue, clsx} from 'clsx';\nimport {twMerge} from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n  ```\n\n# What's new in React Tools 1.9.0\n\n- Added the menu item 🧩 Create Next or React Named Component with Styles.\n- Added the menu item 📱 Create React Native Named Component with Styles.\n\n# What's new in React Tools 1.8.0\n\n- Change extension name to React Tools.\n- The menu items for React JS, Next JS and React Native was separeted in groups.\n\n# What's new in React Tools 1.7.0\n\n- Change icons of the menu items as bellow:\n  🧩 Create Next or React Component\n  🧩 Create Next or React Component with Styles\n  🧩 Create Next or React Named Component\n  📑 Create Next Page\n  📱 Create React Native Component\n  📱 Create React Native Component with Styles\n  📱 Create React Native Named Component\n- The names of Next JS components and pages have rules that are applied automatically and the extension will apply the\n  Pascal Case or Kebab Case format depending on the situation. So now just type the name of the component or page and\n  the extension will apply the correct pattern.\n- Added the setting `useBarrel` that Defines if the **Named Components** will be created using the barrel pattern.\n- Added the setting `useExportDefault` that defines if the component will use export default or named export.\n\n# React Tools\n\n![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/ricardo-emerson.create-react-tsx-component.svg?style=flat-square)\n![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/ricardo-emerson.create-react-tsx-component.svg?style=flat-square)\n![Visual Studio Marketplace Downloads](https://img.shields.io/visual-studio-marketplace/d/ricardo-emerson.create-react-tsx-component.svg?style=flat-square)\n![Visual Studio Marketplace Rating](https://img.shields.io/visual-studio-marketplace/r/ricardo-emerson.create-react-tsx-component.svg?style=flat-square)\n[![GitHub](https://img.shields.io/github/stars/ricardoemerson/create-react-tsx-component.svg?style=flat-square)](https://github.com/ricardoemerson/create-react-tsx-component)\n\nThis extension creates a Functional Component for Next, React and React Native using Typescript or Javascript with\nStyled Components, SASS, LESS or CSS.\n\n## Settings\n\nThese are all available configurations with their default values.\n\n![Usage](images/all-settings.png)\n\n## Configuration for the Page or Component File (tsx, jsx or js)\n\nBy default pages or components files are created using Typescript with files extension `.tsx`. It is also possible to\ncreate pages or components with Javascript with files extension `.jsx` or `.js`.\n\n![Usage](images/component-settings.png)\n\nExample of `settings.json`:\n\n```json\n{\n  \"createReactTSXComponent.fileExtension\": \"tsx|jsx|js\"\n}\n```\n\n## Configuration for create a component using Regular Function or Arrow Function\n\nBy default pages or components files are created using `Regular Function`. It is also possible to create pages or\ncomponents using `Arrow Function`.\n\n![Usage](images/use-arrow-function-settings.png)\n\nExample of `settings.json`:\n\n```json\n{\n  \"createReactTSXComponent.useArrowFunctionComponent\": true\n}\n```\n\nExample of page or component creation using `Regular Function` or `Arrow Function`:\n\n![Usage](images/use-arrow-function-created.png)\n\n## Configuration for create a named component using Barrel pattern\n\nBy default **named components** files are created using `Barrel Pattern` that creates an index file with export of the\nnamed component created, where each component created will be included into the index file an export entrance for the\nnew component.\n\n![Usage](images/use-barrel-settings.png)\n\nExample of `settings.json`:\n\n```json\n{\n  \"createReactTSXComponent.useBarrel\": true\n}\n```\n\nExample of component creation with `Use Barrel` option enabled:\n\n![Usage](images/use-barrel.png)\n\n## Configuration for create components using Export Default\n\nBy default components files are created using `named export` instead `export default`.\n\n![Usage](images/use-export-default-settings.png)\n\nExample of `settings.json`:\n\n```json\n{\n  \"createReactTSXComponent.useExportDefault\": true\n}\n```\n\nExample of component creation with `Use Export Default` option enabled or disabled:\n\n![Usage](images/use-export-default-example.png)\n\n## Configuration for create a page or component using React.FC.\n\nBy default pages or components files are created whithout uses `React.FC`. It is also possible to create pages or\ncomponents using `React.FC`.\n\n**Important:** This option it is only applicable if option `Use Arrow Function Component` is enabled.\n\n![Usage](images/use-react-fc-settings.png)\n\nExample of `settings.json`:\n\n```json\n{\n  \"createReactTSXComponent.useReactFC\": true\n}\n```\n\nExample of page or component creation using `React.FC` or not:\n\n![Usage](images/use-react-fc-created.png)\n\n## Configuration for create a component using import for React to use JSX.\n\nBy default pages or components files are created whithout uses the React import (`import React from 'react';`) it the\nbeginning of the component. It is also possible to create pages or components using the React import.\n\nThis option should only be used if you are using **React 16 or previous version**.\n\n![Usage](images/use-react-import-settings.png)\n\nExample of `settings.json`:\n\n```json\n{\n  \"createReactTSXComponent.useReactImport\": true\n}\n```\n\nExample of component creation using `import React from 'react';` or not:\n\n![Usage](images/use-react-import-created.png)\n\n## Configuration for the Style File (Styled Components, SCSS, LESS, CSS or CVA - Class Variance Authority)\n\nIt is also possible to create components **just for React** using SASS (`.scss`), CSS (`.css`) or using (\n`CVA - Class Variance Authority`) to define component styles.\n\n![Usage](images/styles-settings.png)\n\nExample of `settings.json`:\n\n```json\n{\n  \"createReactTSXComponent.stylesFormat\": \"Styled Components|SCSS|LESS|CSS|CVA - Class Variance Authority\"\n}\n```\n\n## Configuration for use (CSS Module with SCSS or CSS)\n\nIt is also possible use **CSS Module** in the creation of styles for your components **just for SCSS and CSS**. This\noption, which by default is disabled, adds the suffix `.module.css` or `.module.scss` to the style files created.\n\n![Usage](images/use-css-module-settings.png)\n\nExample of `settings.json`:\n\n```json\n{\n  \"createReactTSXComponent.useCSSModule\": true\n}\n```\n\nExample of component creation using styles format `CSS` and `useCSSModule` enabled:\n\n![Usage](images/use-css-module-created.png)\n\n# Usage Examples\n\nYou can create a Next, React or React Native Component either by typing in the vscode command palette or by\nright-clicking any folder in the tree view and use the followed options:\n\n- `Create Next or React Component`\n- `Create Next or React Component with Styles`\n- `Create Next or React Named Component`\n- `Create Next or React Named Component with Styles`\n- `Create Next Page`\n- `Create React Native Component`\n- `Create React Native Component with Styles`\n- `Create React Native Named Component`\n- `Create React Native Named Component with Styles`\n\n### All Commands (Ctrl+Shift+P or Cmd+Shift+P):\n\n![Usage](images/show-all-commands.png)\n\n### Mouse Right Click:\n\n![Usage](images/usage-right-mouse-click.png)\n\n## Create Next or React Component with Styles Example:\n\nSelect the folder when the component will be created and choose `Create Next or React Component with Styles` and enter\nthe name of the component to be created.\n\n![Usage](images/name-of-component.png)\n\nThis will create a folder with the component name entered containing the component's `index.tsx` file and the\n`styles.ts` file for defining the component styles.\n\n## Results\n\n`Card/index.tsx`\n\n![Usage](images/component-created.png)\n\n`Card/styles.ts`\n\n![Usage](images/styled-created.png)\n\n## Create Next or React Component with Styles using CVA - Class Variance Authority Example:\n\n\u003e First in **stylesFormat** present in **React Tools Settings**, choose **CVA - Class Variance Authority**.\n\nSelect the folder when the component will be created and choose `Create Next or React Named Component with Styles` and\nenter the name of the component to be created.\n\n![Usage](images/name-of-component.png)\n\nThis will create a file with the component name entered and the file with styles.\n\n## Results\n\n`Card/index.tsx`\n\n![Usage](images/name-of-component-cva.png)\n\n`Card/styles.ts`\n\n![Usage](images/styled-component-created-cva.png)\n\n## Create React Native Component with Styles Example:\n\nSelect the folder when the component will be created and choose `Create React Native Component with Styles` and enter\nthe name of the component to be created.\n\n![Usage](images/name-of-component.png)\n\nThis will create a folder with the component name entered containing the component's `index.tsx` file and the\n`styles.ts` file for defining the component styles.\n\n## Results\n\n`Header/index.tsx`\n\n![Usage](images/rn-component-created.png)\n\n`Header/styles.ts`\n\n![Usage](images/rn-styled-created.png)\n\n## Create Next or React Named Component Example:\n\nSelect the folder when the component will be created and choose `Create Next or React Named Component` and enter the\nname of the component to be created.\n\n![Usage](images/name-of-component.png)\n\nThis will create a file with the component name entered.\n\n## Results\n\n`Card.tsx`\n\n![Usage](images/named-component-created.png)\n\n## Create Next or React Named Component with Styles Example:\n\nSelect the folder when the component will be created and choose `Create Next or React Named Component with Styles` and\nenter the name of the component to be created.\n\n![Usage](images/name-of-component.png)\n\nThis will create a file with the component name entered and the file with styles.\n\n## Results\n\n`Card.tsx`\n\n![Usage](images/named-styled-component-created.png)\n\n`Card.styles.ts`\n\n![Usage](images/named-styled-created.png)\n\nYou can also create components without using `Styled Components`.\n\n## Create Next Page Example:\n\nSelect the folder when the page will be created and choose `Create Next Page` and enter the name of the page to be\ncreated.\n\n![Usage](images/name-of-page.png)\n\nThis will create a file with the page name entered.\n\n## Results\n\n`products.tsx`\n\n![Usage](images/next-page-created.png)\n\n## Next JS Recipe\n\nThese settings can be used to create pages using the `Next JS Framework`.\n\n### Settings:\n\n![Usage](images/all-settings.png)\n\nExample of `settings.json`:\n\n```json\n{\n  \"createReactTSXComponent.useArrowFunctionComponent\": false,\n  \"createReactTSXComponent.useReactFC\": false,\n  \"createReactTSXComponent.useReactImport\": false\n}\n```\n\n**Enjoy!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fricardoemerson%2Fcreate-react-tsx-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fricardoemerson%2Fcreate-react-tsx-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fricardoemerson%2Fcreate-react-tsx-component/lists"}