MarlonPassos-git/create-react-tsx-component

Create React TSX Component - Extension that creates React Component using Typescript with Styled Components.

What's new in Create Next, React and React Native Component 1.6.0

• The settings for using the Next JS Framework are now set as default.
• Adds Create Next Page for creation of Next.js Pages.
• Changed the name of menu item from Create React Component to Create Next or React Component.
• Changed the name of menu item from Create React Component with Styles to Create Next or React Component with Styles.
• Changed the name of menu item from Create React Named Component to Create Next or React Named Component.
• 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.
• Changed the setting for useReactFC that defines if component will be typed using React.FC to false as default.
• Changed the setting for 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.
• 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.

Support

Create Next, React and React Native Component is an extension created for Visual Studio Code. If you find it useful, please consider supporting it.

Donate with PayPal

Donate with Mercado Pago

Create Next, React and React Native Component

This extension creates a Functional Component for Next, React and React Native using Typescript or Javascript with Styled Components, SASS, LESS or CSS.

Settings

These are all available configurations with their default values.

Configuration for the Page or Component File (tsx, jsx or js)

By default pages or components files are created using Typescript with files extension .tsx. It is also possible to create pages or components with Javascript with files extension .jsx or .js.

Example of settings.json:

{
  "createReactTSXComponent.fileExtension": "tsx|jsx|js"
}

Configuration for create a component using Regular Function or Arrow Function

By default pages or components files are created using Regular Function. It is also possible to create pages or components using Arrow Function.

Example of settings.json:

{
  "createReactTSXComponent.useArrowFunctionComponent": true
}

Example of page or component creation using Regular Function or Arrow Function:

Configuration for create a page or component using React.FC.

By default pages or components files are created whithout uses React.FC. It is also possible to create pages or components using React.FC.

Important: This option it is only applicable if option Use Arrow Function Component is enabled.

Example of settings.json:

{
  "createReactTSXComponent.useReactFC": true
}

Example of page or component creation using React.FC or not:

Configuration for create a component using import for React to use JSX.

By default pages or components files are created whithout uses the React import (import React from 'react';) it the beginning of the component. It is also possible to create pages or components using the React import.

This option should only be used if you are using React 16 or previous version.

Example of settings.json:

{
  "createReactTSXComponent.useReactImport": true
}

Example of component creation using import React from 'react'; or not:

Configuration for the Style File (Styled Components, SCSS, LESS or CSS)

It is also possible to create components just for React using SASS (.scss) or CSS (.css) to define component styles.

Example of settings.json:

{
  "createReactTSXComponent.stylesFormat": "Styled Components|SCSS|LESS|CSS"
}

The option TailwindCSSParser it is only for my personal use and can not be used.

Configuration for use (CSS Module with SCSS or CSS)

It is also possible use CSS Module in the creation of styles for your components just for SCSS and CSS. This option, which by default is disabled, adds the suffix .module.css or .module.scss to the style files created.

Example of settings.json:

{
  "createReactTSXComponent.useCSSModule": true
}

Example of component creation using styles format CSS and useCSSModule enabled:

Usage Examples

You can create a Next, React or React Native Component either by typing in the vscode command palette or by right-clicking any folder in the tree view and use the followed options:

• Create Next or React Component
• Create Next or React Component with Styles
• Create Next or React Named Component
• Create Next Page
• Create React Native Component
• Create React Native Component with Styles
• Create React Native Named Component

All Commands (Ctrl+Shift+P or Cmd+Shift+P):

Mouse Right Click:

Create Next or React Component with Styles Example:

Select the folder when the component will be created and choose Create Next or React Component with Styles and enter the name of the component to be created.

This will create a folder with the component name entered containing the component's index.tsx file and the styles.ts file for defining the component styles.

Results

Card/index.tsx

Card/styles.ts

Create React Native Component with Styles Example:

Select the folder when the component will be created and choose Create React Native Component with Styles and enter the name of the component to be created.

This will create a folder with the component name entered containing the component's index.tsx file and the styles.ts file for defining the component styles.

Results

Header/index.tsx

Header/styles.ts

Create Next or React Named Component Example:

Select the folder when the component will be created and choose Create Next or React Named Component and enter the name of the component to be created.

This will create a file with the component name entered.

Results

Header.tsx

You can also create components without using Styled Components.

Create Next Page Example:

Select the folder when the page will be created and choose Create Next Page and enter the name of the page to be created.

This will create a file with the page name entered.

Results

products.tsx

Next JS Recipe

These settings can be used to create pages using the Next JS Framework.

Settings:

Example of settings.json:

{
  "createReactTSXComponent.useArrowFunctionComponent": false,
  "createReactTSXComponent.useReactFC": false,
  "createReactTSXComponent.useReactImport": false
}

Enjoy!