@nx/react:component

Create a React Component for Nx.

Examples

Create a component named MyComponent at libs/ui/src/my-component.tsx:

โฏ

nx g @nx/react:component libs/ui/src/my-component.tsx

Usage

1nx generate component ... 2
1nx g c ... #same 2

By default, Nx will search for component in the default collection provisioned in workspace.json.

You can specify the collection explicitly as follows:

1nx g @nx/react:component ... 2

Show what will be generated without writing to disk:

1nx g component ... --dry-run 2

Options

path

Required
string

The file path to the component. Relative to the current working directory.

classComponent

C
boolean
Default: false

Use class components instead of functional component.

export

e
boolean
Default: false

When true, the component is exported from the project index.ts (if it exists).

globalCss

boolean
Default: false

Default is false. When true, the component is generated with *.css/*.scss instead of *.module.css/*.module.scss.

inSourceTests

boolean
Default: false

When using Vitest, separate spec files will not be generated and instead will be included within the source files. Read more on the Vitest docs site: https://vitest.dev/guide/in-source.html

name

string

The component symbol name. Defaults to the last segment of the file path.

routing

boolean

Generate a library with routes.

style

s
string
Default: css

The file extension to be used for style files.

skipTests

Internal
boolean
Default: false

When true, does not create spec.ts test files for the new component.

skipFormat

Internal
boolean
Default: false

Skip formatting files.

js

Deprecated
boolean

Generate JavaScript files rather than TypeScript files.

Provide the full file path including the file extension in the path option. This option will be removed in Nx v21.