@nrwl/react:component
Create a React component
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)
Type: string
The name of the component.
project (required)
Alias(es): p
Type: string
The name of the project.
classComponent
Alias(es): C
Default: false
Type: boolean
Use class components instead of functional component.
directory
Alias(es): dir
Type: string
Create the component under this directory (can be nested).
export
Alias(es): e
Default: false
Type: boolean
When true, the component is exported from the project index.ts (if it exists).
fileName
Type: string
Create a component with this file name.
flat
Default: false
Type: boolean
Create component at the source root rather than its own directory.
globalCss
Default: false
Type: boolean
Default is false. When true, the component is generated with .css/.scss instead of .module.css/.module.scss
js
Default: false
Type: boolean
Generate JavaScript files rather than TypeScript files.
pascalCaseDirectory
Alias(es): R
Default: false
Type: boolean
Use pascal case directory name (e.g. App/App.tsx).
pascalCaseFiles
Alias(es): P
Default: false
Type: boolean
Use pascal case component file name (e.g. App.tsx).
routing
Type: boolean
Generate a library with routes.
skipTests
Default: false
Type: boolean
When true, does not create "spec.ts" test files for the new component.
style
Alias(es): s
Default: css
Type: string
Possible values: css
, scss
, styl
, less
, styled-components
, @emotion/styled
, styled-jsx
, none
The file extension to be used for style files.