@nrwl/react:component

Create a React Component for Nx.

Usage

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

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

You can specify the collection explicitly as follows:

nx g @nrwl/react:component ...

Show what will be generated without writing to disk:

nx g component ... --dry-run

Examples

Generate a component in the mylib library:

nx g component my-component --project=mylib

Generate a class component in the mylib library:

nx g component my-component --project=mylib --classComponent

Options

directory

dir
string

Create the component under this directory (can be nested).

name

Required
string

The name of the component.

project

pRequired
string

The name of the project.

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).

flat

boolean
Default: false

Create component at the source root rather than its own directory.

fileName

string

Create a component with this file name.

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

js

boolean
Default: false

Generate JavaScript files rather than TypeScript files.

pascalCaseFiles

P
boolean
Default: false

Use pascal case component file name (e.g. App.tsx).

pascalCaseDirectory

R
boolean
Default: false

Use pascal case directory name (e.g. App/App.tsx).

routing

boolean

Generate a library with routes.

style

s
string
Default: css

The file extension to be used for style files.

skipTests

boolean
Default: false

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