├── .github └── FUNDING.yml ├── .vscode ├── launch.json ├── settings.json └── tasks.json ├── CHANGELOG.md ├── LICENSE.md ├── README.md └── images ├── .directory ├── all-settings.png ├── component-created.png ├── component-settings.png ├── cover-logo.png ├── logo.png ├── name-of-component-cva.png ├── name-of-component.png ├── name-of-page.png ├── named-component-created.png ├── named-styled-component-created.png ├── named-styled-created.png ├── next-js-component-created.png ├── next-js-name-of-component.png ├── next-js-settings.png ├── next-page-created.png ├── rn-component-created.png ├── rn-styled-created.png ├── show-all-commands.png ├── styled-component-created-cva.png ├── styled-created.png ├── styles-settings.png ├── usage-right-mouse-click.png ├── use-arrow-function-created.png ├── use-arrow-function-settings.png ├── use-barrel-settings.png ├── use-barrel.png ├── use-css-module-created.png ├── use-css-module-settings.png ├── use-export-default-example.png ├── use-export-default-settings.png ├── use-react-fc-created.png ├── use-react-fc-settings.png ├── use-react-import-created.png └── use-react-import-settings.png /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | custom: ["https://www.paypal.com/donate?hosted_button_id=X26H7L6AVMD96", "https://mpago.la/1LvP93a"] 4 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that compiles the extension and then opens it inside a new window 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | { 6 | "version": "0.2.0", 7 | "configurations": [{ 8 | "name": "Run Extension", 9 | "type": "extensionHost", 10 | "request": "launch", 11 | "runtimeExecutable": "${execPath}", 12 | "args": [ 13 | "--extensionDevelopmentPath=${workspaceFolder}" 14 | ], 15 | "outFiles": [ 16 | "${workspaceFolder}/out/**/*.js" 17 | ], 18 | "preLaunchTask": "npm: watch" 19 | }, 20 | { 21 | "name": "Extension Tests", 22 | "type": "extensionHost", 23 | "request": "launch", 24 | "runtimeExecutable": "${execPath}", 25 | "args": [ 26 | "--extensionDevelopmentPath=${workspaceFolder}", 27 | "--extensionTestsPath=${workspaceFolder}/out/test" 28 | ], 29 | "outFiles": [ 30 | "${workspaceFolder}/out/test/**/*.js" 31 | ], 32 | "preLaunchTask": "npm: watch" 33 | } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | // Place your settings in this file to overwrite default and user settings. 2 | { 3 | "files.exclude": { 4 | "out": false // set this to true to hide the "out" folder with the compiled JS files 5 | }, 6 | "search.exclude": { 7 | "out": true // set this to false to include "out" folder in search results 8 | }, 9 | // Turn off tsc task auto detection since we have the necessary tasks as npm scripts 10 | "typescript.tsc.autoDetect": "off", 11 | "createReactTSXComponent.useReactFC": false, 12 | "createReactTSXComponent.stylesFormat": "CVA - Class Variance Authority", 13 | "cSpell.words": [ 14 | "clsx" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | // See https://go.microsoft.com/fwlink/?LinkId=733558 2 | // for the documentation about the tasks.json format 3 | { 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "type": "npm", 8 | "script": "watch", 9 | "problemMatcher": "$tsc-watch", 10 | "isBackground": true, 11 | "presentation": { 12 | "reveal": "never" 13 | }, 14 | "group": { 15 | "kind": "build", 16 | "isDefault": true 17 | } 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to the React Tools extension will be documented in this file. 4 | 5 | ## [1.11.0] 6 | 7 | - Added notification message for extension updates. 8 | 9 | ## [1.10.0] 10 | 11 | - Added to setting `stylesFormat` the option `CVA - Class Variance Authority` to allow create complex components using this package. 12 | 13 | ## [1.9.2] 14 | 15 | - Updated the badges in README.md. 16 | 17 | ## [1.9.0] 18 | 19 | - Added the menu item 🧩 Create Next or React Named Component with Styles. 20 | - Added the menu item 📱 Create React Native Named Component with Styles. 21 | 22 | ## [1.8.0] 23 | 24 | - Change extension name to React Tools. 25 | - Change icons of the menu items as bellow: 26 | 🧩 Create Next or React Component 27 | 🧩 Create Next or React Component with Styles 28 | 🧩 Create Next or React Named Component 29 | 📑 Create Next Page 30 | 📱 Create React Native Component 31 | 📱 Create React Native Component with Styles 32 | 📱 Create React Native Named Component 33 | - The menu items for React JS, Next JS and React Native was separeted in groups. 34 | 35 | ## [1.7.0] 36 | 37 | - The names of Next JS components and pages have rules that are applied automatically and the extension will apply the Pascal Case or Kebab Case format depending on the situation. So now just type the name of the component or page and the extension will apply the correct pattern. 38 | - Added the setting `useBarrel` that Defines if the Named Components will be created using the barrel pattern. 39 | - Added the setting `useExportDefault` that defines if the component will use export default or named export. 40 | 41 | ## [1.6.0] 42 | 43 | - The settings for using the `Next JS Framework` are now set as default. 44 | - Adds **Create Next Page** for creation of Next.js Pages. 45 | - Changed the name of menu item from **Create React Component** to **Create Next or React Component**. 46 | - Changed the name of menu item from **Create React Component with Styles** to **Create Next or React Component with Styles**. 47 | - Changed the name of menu item from **Create React Named Component** to **Create Next or React Named Component**. 48 | - Changed the setting for **useArrowFunctionComponent** that defines if component will be created using an a `Regular Function` or `Arrow Function` to uses `Regular Function` as default. 49 | - Changed the setting **useReactFC** that defines if component will be typed using `React.FC` to false as default. 50 | - Changed the setting **useReactImport** that defines if the import of React (`import React from 'react';`) will be used at the beginning of the component to false as default. 51 | 52 | ## [1.5.0] 53 | 54 | - Adds **Orange Icon** 🔶 for React Component Actions. 55 | - Adds **Blue Icon** 🔷 for React Native Component Actions. 56 | - Adds **Create React Named Component** for creation of a React Component file with a name of component without folder creation. 57 | - Adds **Create React Native Named Component** for creation of a React Native Component file with a name of component without folder creation. 58 | - Adds the setting **useArrowFunctionComponent** that defines if component will be created using an `Arrow Function` or a `Regular Function`. 59 | - Adds the setting **useReactFC** that defines if component will be typed using `React.FC`. **Important:** Only applicable if option `Use Arrow Function Component` and `Use React Import` is enabled. 60 | - Adds the setting **useReactImport** that defines if the import of React (`import React from 'react';`) will be used at the beginning of the component. This option should only be used if you are using **React 17+**, that comes with support for the new JSX transform, where we don’t need to import React to our components anymore to use JSX. 61 | - Adds the setting **useCSSModule** that defines if CSS file name will be sufixed with `.module.css` or `.module.scss`. **Important:** Only applicable if option `Styles Format` is `CSS` or `SCSS`. 62 | - Adds `Next JS Framework` support. 63 | 64 | ## [1.4.3] 65 | 66 | - Fixed the `.css` file extension when uses `.js` files format. 67 | 68 | ## [1.4.2] 69 | 70 | - Updated the Readme.md, context menu items names for components with styles, extension name and description. 71 | 72 | ## [1.4.1] 73 | 74 | - Updated the Readme.md. 75 | 76 | ## [1.4.0] 77 | 78 | - Added support to use LESS in components creations. 79 | 80 | ## [1.3.1] 81 | 82 | - Fix Styled Component file extension when use `.jsx` or `.js`. 83 | 84 | ## [1.3.0] 85 | 86 | - Added support to use SCSS or CSS in components creations. 87 | 88 | ## [1.2.1] 89 | 90 | - Updated the Readme.md. 91 | 92 | ## [1.2.0] 93 | 94 | - Added support to create components using Javascript using files with extension `.jsx` and `.js`. 95 | 96 | ## [1.1.3] 97 | 98 | - Update changelog.md file. 99 | 100 | ## [1.1.2] 101 | 102 | - Update the Readme.md and changed the React Native Styled Container component and included StyleSheet for React Native component without Styled Components. 103 | 104 | ## [1.1.1] 105 | 106 | - Update changelog.md file. 107 | 108 | ## [1.1.0] 109 | 110 | - Added support for creating components for React Native. 111 | 112 | ## [1.0.1] 113 | 114 | - Update file Readme.md. 115 | 116 | ## [1.0.0] 117 | 118 | - Initial release. 119 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | React Tools Pro 2 | Copyright (c) 2021-2025 Ricardo Emerson 3 | All rights reserved. 4 | 5 | This software is proprietary and licensed solely for personal or commercial use by individuals or entities under the 6 | terms outlined by Ricardo Emerson. Access to React Tools Pro requires the purchase of a valid subscription. The free 7 | version of the software has been discontinued. 8 | 9 | Unauthorized copying, modification, distribution, reverse-engineering, or any attempt to access or replicate the source 10 | code of this software is strictly prohibited. The software is provided "as is," without warranty of any kind, express or 11 | implied, including but not limited to warranties of merchantability, fitness for a particular purpose, or 12 | non-infringement. Ricardo Emerson shall not be liable for any claim, damages, or other liability arising from the use of 13 | this software. 14 | 15 | For licensing details, subscription purchases, or support, 16 | visit [https://extensionshub.com.br](https://extensionshub.com.br) or contact [Ricardo Emerson]( 17 | mailto:ricardo_emerson@extensionshub.com.br). 18 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |
3 | 4 | React Tools Logo 5 | 6 |

7 | 8 | # What's new in React Tools 1.12.0 9 | 10 | ## ✨Important Update: License Change for the Extension 11 | 12 | The React Tools extension is now fully paid. Since its launch, this extension has been designed to streamline and 13 | enhance React development in Visual Studio Code. Initially offered for free, then under a freemium model, we are now 14 | taking the next step to ensure its sustainability and continued development. 15 | 16 | ### 💡 Why this change? 17 | 18 | Maintaining and improving an extension like React Tools requires ongoing time and resources. With the paid model, we 19 | can: 20 | 21 | ✅ Continuously improve and add new features. 22 | ✅ Provide better support for users. 23 | ✅ Deliver regular updates to keep the extension compatible with new versions of React and Visual Studio Code. 24 | 25 | ### 🔑 How to get your subscription? 26 | 27 | To continue using React Tools Pro and gain access to 28 | exclusive features like advanced framework support, custom template 29 | generation, and much more, you can purchase a paid license through the [Extensions Hub](https://extensionshub.com.br), 30 | where we offer flexible payment options. 31 | 32 | ### How to get started? 33 | 34 | Visit [https://extensionshub.com.br](https://extensionshub.com.br) now, where you can choose your plan, and unlock all 35 | premium 36 | features in just a few clicks. 37 | 38 | #### How to Register Your Subscription 39 | 40 | Ready to unlock the premium features of **React Tools Pro** in Visual Studio Code? Follow these simple steps to 41 | register your subscription 42 | using your subscription key: 43 | 44 | 1. **Open the Command Palette** 45 | 46 | - In Visual Studio Code, press `Ctrl + Shift + P` (Windows/Linux) or `Cmd + Shift + P` (Mac) to open the Command 47 | Palette. 48 | 49 | 2. **Select the Subscription Option in the Command Palette** 50 | 51 | - Type "React Tools Pro" and select: 52 | ✏️ **Add/Update Subscription Key for React Tools Pro** 53 | 54 | 3. **Enter Your Subscription Key that you copied from Extensions Hub** 55 | 56 | - A text input will appear. Paste the subscription key you received after purchasing your plan 57 | at [https://extensionshub.com.br](https://extensionshub.com.br). 58 | - Press `Enter` to submit. 59 | 60 | 4. **Name Your Device** 61 | 62 | - Another input will pop up. Enter a name for your device (e.g., "Work Laptop" or "Home PC") to help you identify it 63 | later. 64 | - Press `Enter` to confirm. 65 | 66 | 5. **Enjoy Premium Features!** 67 | 68 | - Once validated, you’ll have instant access to all **Pro features 🎖️**. Start boosting your React workflow right 69 | away! 70 | 71 | 🙌 Thank you for your support! 72 | 73 | We recognize that this change, making the extension fully paid, may impact some users, but we believe it will allow the 74 | extension to 75 | continue growing and providing even more value to the React community. 76 | 77 | Thank you for being part of this journey! If you have any questions, feel free to reach out. 🚀 78 | ! 79 | 80 | Best regards, 81 | 82 | **Ricardo Emerson** 83 | Extensions Hub Team 84 | --- 85 | 86 | # What's new in React Tools 1.10.0 87 | 88 | - Added to setting `stylesFormat` the option `CVA - Class Variance Authority` to allow create complex components using 89 | this package. 90 | 91 | To use `CVA - Class Variance Authority` you need to add to your `package.json` the packages: 92 | - `class-variance-authority`; 93 | - `clsx`; 94 | - `tailwind-merge`. 95 | 96 | And create this function in `src/services/tailwind-css-util.ts`: 97 | 98 | ```ts 99 | import {ClassValue, clsx} from 'clsx'; 100 | import {twMerge} from 'tailwind-merge'; 101 | 102 | export function cn(...inputs: ClassValue[]) { 103 | return twMerge(clsx(inputs)); 104 | } 105 | ``` 106 | 107 | # What's new in React Tools 1.9.0 108 | 109 | - Added the menu item 🧩 Create Next or React Named Component with Styles. 110 | - Added the menu item 📱 Create React Native Named Component with Styles. 111 | 112 | # What's new in React Tools 1.8.0 113 | 114 | - Change extension name to React Tools. 115 | - The menu items for React JS, Next JS and React Native was separeted in groups. 116 | 117 | # What's new in React Tools 1.7.0 118 | 119 | - Change icons of the menu items as bellow: 120 | 🧩 Create Next or React Component 121 | 🧩 Create Next or React Component with Styles 122 | 🧩 Create Next or React Named Component 123 | 📑 Create Next Page 124 | 📱 Create React Native Component 125 | 📱 Create React Native Component with Styles 126 | 📱 Create React Native Named Component 127 | - The names of Next JS components and pages have rules that are applied automatically and the extension will apply the 128 | Pascal Case or Kebab Case format depending on the situation. So now just type the name of the component or page and 129 | the extension will apply the correct pattern. 130 | - Added the setting `useBarrel` that Defines if the **Named Components** will be created using the barrel pattern. 131 | - Added the setting `useExportDefault` that defines if the component will use export default or named export. 132 | 133 | # React Tools 134 | 135 | ![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/ricardo-emerson.create-react-tsx-component.svg?style=flat-square) 136 | ![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/ricardo-emerson.create-react-tsx-component.svg?style=flat-square) 137 | ![Visual Studio Marketplace Downloads](https://img.shields.io/visual-studio-marketplace/d/ricardo-emerson.create-react-tsx-component.svg?style=flat-square) 138 | ![Visual Studio Marketplace Rating](https://img.shields.io/visual-studio-marketplace/r/ricardo-emerson.create-react-tsx-component.svg?style=flat-square) 139 | [![GitHub](https://img.shields.io/github/stars/ricardoemerson/create-react-tsx-component.svg?style=flat-square)](https://github.com/ricardoemerson/create-react-tsx-component) 140 | 141 | This extension creates a Functional Component for Next, React and React Native using Typescript or Javascript with 142 | Styled Components, SASS, LESS or CSS. 143 | 144 | ## Settings 145 | 146 | These are all available configurations with their default values. 147 | 148 | ![Usage](images/all-settings.png) 149 | 150 | ## Configuration for the Page or Component File (tsx, jsx or js) 151 | 152 | By default pages or components files are created using Typescript with files extension `.tsx`. It is also possible to 153 | create pages or components with Javascript with files extension `.jsx` or `.js`. 154 | 155 | ![Usage](images/component-settings.png) 156 | 157 | Example of `settings.json`: 158 | 159 | ```json 160 | { 161 | "createReactTSXComponent.fileExtension": "tsx|jsx|js" 162 | } 163 | ``` 164 | 165 | ## Configuration for create a component using Regular Function or Arrow Function 166 | 167 | By default pages or components files are created using `Regular Function`. It is also possible to create pages or 168 | components using `Arrow Function`. 169 | 170 | ![Usage](images/use-arrow-function-settings.png) 171 | 172 | Example of `settings.json`: 173 | 174 | ```json 175 | { 176 | "createReactTSXComponent.useArrowFunctionComponent": true 177 | } 178 | ``` 179 | 180 | Example of page or component creation using `Regular Function` or `Arrow Function`: 181 | 182 | ![Usage](images/use-arrow-function-created.png) 183 | 184 | ## Configuration for create a named component using Barrel pattern 185 | 186 | By default **named components** files are created using `Barrel Pattern` that creates an index file with export of the 187 | named component created, where each component created will be included into the index file an export entrance for the 188 | new component. 189 | 190 | ![Usage](images/use-barrel-settings.png) 191 | 192 | Example of `settings.json`: 193 | 194 | ```json 195 | { 196 | "createReactTSXComponent.useBarrel": true 197 | } 198 | ``` 199 | 200 | Example of component creation with `Use Barrel` option enabled: 201 | 202 | ![Usage](images/use-barrel.png) 203 | 204 | ## Configuration for create components using Export Default 205 | 206 | By default components files are created using `named export` instead `export default`. 207 | 208 | ![Usage](images/use-export-default-settings.png) 209 | 210 | Example of `settings.json`: 211 | 212 | ```json 213 | { 214 | "createReactTSXComponent.useExportDefault": true 215 | } 216 | ``` 217 | 218 | Example of component creation with `Use Export Default` option enabled or disabled: 219 | 220 | ![Usage](images/use-export-default-example.png) 221 | 222 | ## Configuration for create a page or component using React.FC. 223 | 224 | By default pages or components files are created whithout uses `React.FC`. It is also possible to create pages or 225 | components using `React.FC`. 226 | 227 | **Important:** This option it is only applicable if option `Use Arrow Function Component` is enabled. 228 | 229 | ![Usage](images/use-react-fc-settings.png) 230 | 231 | Example of `settings.json`: 232 | 233 | ```json 234 | { 235 | "createReactTSXComponent.useReactFC": true 236 | } 237 | ``` 238 | 239 | Example of page or component creation using `React.FC` or not: 240 | 241 | ![Usage](images/use-react-fc-created.png) 242 | 243 | ## Configuration for create a component using import for React to use JSX. 244 | 245 | By default pages or components files are created whithout uses the React import (`import React from 'react';`) it the 246 | beginning of the component. It is also possible to create pages or components using the React import. 247 | 248 | This option should only be used if you are using **React 16 or previous version**. 249 | 250 | ![Usage](images/use-react-import-settings.png) 251 | 252 | Example of `settings.json`: 253 | 254 | ```json 255 | { 256 | "createReactTSXComponent.useReactImport": true 257 | } 258 | ``` 259 | 260 | Example of component creation using `import React from 'react';` or not: 261 | 262 | ![Usage](images/use-react-import-created.png) 263 | 264 | ## Configuration for the Style File (Styled Components, SCSS, LESS, CSS or CVA - Class Variance Authority) 265 | 266 | It is also possible to create components **just for React** using SASS (`.scss`), CSS (`.css`) or using ( 267 | `CVA - Class Variance Authority`) to define component styles. 268 | 269 | ![Usage](images/styles-settings.png) 270 | 271 | Example of `settings.json`: 272 | 273 | ```json 274 | { 275 | "createReactTSXComponent.stylesFormat": "Styled Components|SCSS|LESS|CSS|CVA - Class Variance Authority" 276 | } 277 | ``` 278 | 279 | ## Configuration for use (CSS Module with SCSS or CSS) 280 | 281 | It is also possible use **CSS Module** in the creation of styles for your components **just for SCSS and CSS**. This 282 | option, which by default is disabled, adds the suffix `.module.css` or `.module.scss` to the style files created. 283 | 284 | ![Usage](images/use-css-module-settings.png) 285 | 286 | Example of `settings.json`: 287 | 288 | ```json 289 | { 290 | "createReactTSXComponent.useCSSModule": true 291 | } 292 | ``` 293 | 294 | Example of component creation using styles format `CSS` and `useCSSModule` enabled: 295 | 296 | ![Usage](images/use-css-module-created.png) 297 | 298 | # Usage Examples 299 | 300 | You can create a Next, React or React Native Component either by typing in the vscode command palette or by 301 | right-clicking any folder in the tree view and use the followed options: 302 | 303 | - `Create Next or React Component` 304 | - `Create Next or React Component with Styles` 305 | - `Create Next or React Named Component` 306 | - `Create Next or React Named Component with Styles` 307 | - `Create Next Page` 308 | - `Create React Native Component` 309 | - `Create React Native Component with Styles` 310 | - `Create React Native Named Component` 311 | - `Create React Native Named Component with Styles` 312 | 313 | ### All Commands (Ctrl+Shift+P or Cmd+Shift+P): 314 | 315 | ![Usage](images/show-all-commands.png) 316 | 317 | ### Mouse Right Click: 318 | 319 | ![Usage](images/usage-right-mouse-click.png) 320 | 321 | ## Create Next or React Component with Styles Example: 322 | 323 | Select the folder when the component will be created and choose `Create Next or React Component with Styles` and enter 324 | the name of the component to be created. 325 | 326 | ![Usage](images/name-of-component.png) 327 | 328 | This will create a folder with the component name entered containing the component's `index.tsx` file and the 329 | `styles.ts` file for defining the component styles. 330 | 331 | ## Results 332 | 333 | `Card/index.tsx` 334 | 335 | ![Usage](images/component-created.png) 336 | 337 | `Card/styles.ts` 338 | 339 | ![Usage](images/styled-created.png) 340 | 341 | ## Create Next or React Component with Styles using CVA - Class Variance Authority Example: 342 | 343 | > First in **stylesFormat** present in **React Tools Settings**, choose **CVA - Class Variance Authority**. 344 | 345 | Select the folder when the component will be created and choose `Create Next or React Named Component with Styles` and 346 | enter the name of the component to be created. 347 | 348 | ![Usage](images/name-of-component.png) 349 | 350 | This will create a file with the component name entered and the file with styles. 351 | 352 | ## Results 353 | 354 | `Card/index.tsx` 355 | 356 | ![Usage](images/name-of-component-cva.png) 357 | 358 | `Card/styles.ts` 359 | 360 | ![Usage](images/styled-component-created-cva.png) 361 | 362 | ## Create React Native Component with Styles Example: 363 | 364 | Select the folder when the component will be created and choose `Create React Native Component with Styles` and enter 365 | the name of the component to be created. 366 | 367 | ![Usage](images/name-of-component.png) 368 | 369 | This will create a folder with the component name entered containing the component's `index.tsx` file and the 370 | `styles.ts` file for defining the component styles. 371 | 372 | ## Results 373 | 374 | `Header/index.tsx` 375 | 376 | ![Usage](images/rn-component-created.png) 377 | 378 | `Header/styles.ts` 379 | 380 | ![Usage](images/rn-styled-created.png) 381 | 382 | ## Create Next or React Named Component Example: 383 | 384 | Select the folder when the component will be created and choose `Create Next or React Named Component` and enter the 385 | name of the component to be created. 386 | 387 | ![Usage](images/name-of-component.png) 388 | 389 | This will create a file with the component name entered. 390 | 391 | ## Results 392 | 393 | `Card.tsx` 394 | 395 | ![Usage](images/named-component-created.png) 396 | 397 | ## Create Next or React Named Component with Styles Example: 398 | 399 | Select the folder when the component will be created and choose `Create Next or React Named Component with Styles` and 400 | enter the name of the component to be created. 401 | 402 | ![Usage](images/name-of-component.png) 403 | 404 | This will create a file with the component name entered and the file with styles. 405 | 406 | ## Results 407 | 408 | `Card.tsx` 409 | 410 | ![Usage](images/named-styled-component-created.png) 411 | 412 | `Card.styles.ts` 413 | 414 | ![Usage](images/named-styled-created.png) 415 | 416 | You can also create components without using `Styled Components`. 417 | 418 | ## Create Next Page Example: 419 | 420 | Select the folder when the page will be created and choose `Create Next Page` and enter the name of the page to be 421 | created. 422 | 423 | ![Usage](images/name-of-page.png) 424 | 425 | This will create a file with the page name entered. 426 | 427 | ## Results 428 | 429 | `products.tsx` 430 | 431 | ![Usage](images/next-page-created.png) 432 | 433 | ## Next JS Recipe 434 | 435 | These settings can be used to create pages using the `Next JS Framework`. 436 | 437 | ### Settings: 438 | 439 | ![Usage](images/all-settings.png) 440 | 441 | Example of `settings.json`: 442 | 443 | ```json 444 | { 445 | "createReactTSXComponent.useArrowFunctionComponent": false, 446 | "createReactTSXComponent.useReactFC": false, 447 | "createReactTSXComponent.useReactImport": false 448 | } 449 | ``` 450 | 451 | **Enjoy!** 452 | -------------------------------------------------------------------------------- /images/.directory: -------------------------------------------------------------------------------- 1 | [Dolphin] 2 | SortOrder=1 3 | SortRole=modificationtime 4 | Timestamp=2020,11,2,13,12,21 5 | Version=4 6 | 7 | [Settings] 8 | HiddenFilesShown=true 9 | -------------------------------------------------------------------------------- /images/all-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/all-settings.png -------------------------------------------------------------------------------- /images/component-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/component-created.png -------------------------------------------------------------------------------- /images/component-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/component-settings.png -------------------------------------------------------------------------------- /images/cover-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/cover-logo.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/logo.png -------------------------------------------------------------------------------- /images/name-of-component-cva.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/name-of-component-cva.png -------------------------------------------------------------------------------- /images/name-of-component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/name-of-component.png -------------------------------------------------------------------------------- /images/name-of-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/name-of-page.png -------------------------------------------------------------------------------- /images/named-component-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/named-component-created.png -------------------------------------------------------------------------------- /images/named-styled-component-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/named-styled-component-created.png -------------------------------------------------------------------------------- /images/named-styled-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/named-styled-created.png -------------------------------------------------------------------------------- /images/next-js-component-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/next-js-component-created.png -------------------------------------------------------------------------------- /images/next-js-name-of-component.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/next-js-name-of-component.png -------------------------------------------------------------------------------- /images/next-js-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/next-js-settings.png -------------------------------------------------------------------------------- /images/next-page-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/next-page-created.png -------------------------------------------------------------------------------- /images/rn-component-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/rn-component-created.png -------------------------------------------------------------------------------- /images/rn-styled-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/rn-styled-created.png -------------------------------------------------------------------------------- /images/show-all-commands.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/show-all-commands.png -------------------------------------------------------------------------------- /images/styled-component-created-cva.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/styled-component-created-cva.png -------------------------------------------------------------------------------- /images/styled-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/styled-created.png -------------------------------------------------------------------------------- /images/styles-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/styles-settings.png -------------------------------------------------------------------------------- /images/usage-right-mouse-click.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/usage-right-mouse-click.png -------------------------------------------------------------------------------- /images/use-arrow-function-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/use-arrow-function-created.png -------------------------------------------------------------------------------- /images/use-arrow-function-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/use-arrow-function-settings.png -------------------------------------------------------------------------------- /images/use-barrel-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/use-barrel-settings.png -------------------------------------------------------------------------------- /images/use-barrel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/use-barrel.png -------------------------------------------------------------------------------- /images/use-css-module-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/use-css-module-created.png -------------------------------------------------------------------------------- /images/use-css-module-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/use-css-module-settings.png -------------------------------------------------------------------------------- /images/use-export-default-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/use-export-default-example.png -------------------------------------------------------------------------------- /images/use-export-default-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/use-export-default-settings.png -------------------------------------------------------------------------------- /images/use-react-fc-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/use-react-fc-created.png -------------------------------------------------------------------------------- /images/use-react-fc-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/use-react-fc-settings.png -------------------------------------------------------------------------------- /images/use-react-import-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/use-react-import-created.png -------------------------------------------------------------------------------- /images/use-react-import-settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ricardoemerson/create-react-tsx-component/eb0e9b65b1d216b750a72b84f70961b2e581aecd/images/use-react-import-settings.png --------------------------------------------------------------------------------