Update README.md

README.md

@@ -1,9 +1,10 @@
-# React Component Generation Extension for VSCode
+# React Component Generator Extension for VSCode
 
-(**vscode-react-component-generator**)
+The extension helps you to create a React component with one-click. There are also options to create Remix and TypeScript React components.
 
-[![Version](https://vsmarketplacebadge.apphb.com/version/abdullahceylan.vscode-react-component-generator.svg)](https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-component-generator)
-[![Installs](https://vsmarketplacebadge.apphb.com/installs/abdullahceylan.vscode-react-component-generator.svg)](https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-component-generator)
+[![Version](https://vsmarketplacebadges.dev/version/abdullahceylan.vscode-react-component-generator.png)](https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-component-generator)
+[![Installs](https://vsmarketplacebadges.dev/installs-short/abdullahceylan.vscode-react-component-generator.png)](https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-component-generator)
+[![Installs](https://vsmarketplacebadges.dev/rating-star/abdullahceylan.vscode-react-component-generator.png)](https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-component-generator)
 [![The MIT License](https://flat.badgen.net/badge/license/MIT/orange)](http://opensource.org/licenses/MIT)
 [![GitHub](https://flat.badgen.net/github/release/abdullahceylan/vscode-react-component-generator)](https://github.com/abdullahceylan/vscode-react-component-generator/releases)
 
@@ -14,10 +15,11 @@
 
 The extension automatically creates folder for react component containing :
 
-- `index.js`
-- `ComponentName.jsx`
-- `ComponentName.styles.js` (for `styled`-component or `emotion` option)
+- `index.(js|ts)`
+- `ComponentName.(jsx|tsx)`
+- `ComponentName.styles.(js|ts)` (for `styled`-component or `emotion` option)
 - `ComponentName.css` (for `standard` style option)
+- `ComponentName.module.css` (you'll need to set prefix from the extension settings)
 - `ComponentName.scss` (for `sass` style option)
 - `ComponentName.less` (for `less` style option)
 
@@ -37,17 +39,30 @@ ext install abdullahceylan.vscode-react-component-generator
 
 - Right click on the file or folder in the file explorer
 - Select one of following options:
-  - "New React Container Component"
   - "New React Stateless Component"
-  - "New React Container Component with Redux"
   - "New React Stateless Component with Redux"
+  - "New React TypeScript Component"
+  - "New React TypeScript Remix Component"
+  - "New React TypeScript Remix Route Component"
+
 - Enter a component name in the pop up in camelCase or PascalCase. If you enter the component name as in camelCase, then extension will convert it PascalCase automatically.
 
-![Container component](assets/images/vscode-1.gif)
+- For Remix Route component, enter the route file name and the file will be created with `app.` prefix. i.e.:
+  - demoRoute -> app.demo.route.ts
+  - demoRouteChild -> app.demo.route.child.ts
+
+### Creating a React Component
+
+https://github.com/user-attachments/assets/eb2f1b2a-4c5a-42f6-ab37-e5cb47aeafa7
+
+### Creating a TypeScript React Component, Remix TypeScript Component and React TypeScript Route Component
+
+https://github.com/user-attachments/assets/6647ff1e-7002-4302-b27c-a293af95463e
+
 
-![Basic component](assets/images/vscode-2.gif)
+![Classic React Component](assets/images/vscode-2.gif)
 
-![Container component with redux](assets/images/vscode-3.gif)
+![TypeScript and Remix Component](assets/images/vscode-3.gif)
 
 ![Extension settings](assets/images/vscode-settings.png)
 
@@ -77,36 +92,37 @@ The lifecycle type of generated component. Valid options:
 
 Whether to generate component's index file or not.
 
-### `ACReactComponentGenerator.indexFile.extension` (default: `js`)
+### `ACReactComponentGenerator.indexFile.extension` (default: `ts`)
 
 The extension of generated component index file. e.g.: index.(`extension`)
 
 ### `ACReactComponentGenerator.mainFile.create` (default: `true`)
 
 Whether to generate component's main file or not.
 
-### `ACReactComponentGenerator.mainFile.extension` (default: `jsx`)
+### `ACReactComponentGenerator.mainFile.extension` (default: `tsx`)
 
 The extension of generated component file. e.g.: ComponentName.(`extension`)
 
 ### `ACReactComponentGenerator.styleFile.create` (default: `true`)
 
 Whether to generate component's stylesheet file or not.
 
-### `ACReactComponentGenerator.styleFile.extension` (default: `js`)
+### `ACReactComponentGenerator.styleFile.extension` (default: `css`)
 
 The extension of generated stylesheet file. e.g.: ComponentName.styles.(`extension`)
 
-### `ACReactComponentGenerator.styleFile.suffix` (default: `.styles`)
+### `ACReactComponentGenerator.styleFile.suffix` (default: `none`)
 
-The suffix to add to the end of the stylesheet filename. Default: ComponentName`.styles`.(extension)
+The suffix to add to the end of the stylesheet filename. Default: None
+You have option to select `CSS modules` and `Styled Component`
 
 ### `ACReactComponentGenerator.styleFile.type` (default: `styled-components`)
 
 The type of stylesheet file to create. Valid options:
 
-- "styled-components (.js)" - ComponentName.styles.`js`
-- "emotion (.js)" - ComponentName.styles.`js`
+- "standard (.css)" - ComponentName.`css` (You can use this for CSS modules as well)
+- "styled-components/emotion (.js)" - ComponentName.styles.`js`
 - "standard (.css)" - ComponentName.styles.`css`
 - "sass (.scss)" - ComponentName.styles.`sass`
 - "less (.less)" - ComponentName.styles.`less`