@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
name
Required
string
The name of the component.
project
pRequired
string
The name of the project.
directory
dir
string
Create the component under this directory (can be nested).
classComponent
C
boolean
Default:
falseUse class components instead of functional component.
export
e
boolean
Default:
falseWhen true, the component is exported from the project index.ts (if it exists).
flat
boolean
Default:
falseCreate component at the source root rather than its own directory.
fileName
string
Create a component with this file name.
globalCss
boolean
Default:
falseDefault is false. When true, the component is generated with *.css/*.scss instead of *.module.css/*.module.scss.
inSourceTests
boolean
Default:
falseWhen 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:
falseGenerate JavaScript files rather than TypeScript files.
pascalCaseFiles
P
boolean
Default:
falseUse pascal case component file name (e.g. App.tsx).
pascalCaseDirectory
R
boolean
Default:
falseUse pascal case directory name (e.g. App/App.tsx).
routing
boolean
Generate a library with routes.
style
s
string
Default:
cssThe file extension to be used for style files.
skipTests
boolean
Default:
falseWhen true, does not create spec.ts test files for the new component.
skipFormat
boolean
Default:
falseSkip formatting files.