{ "name": "component", "factory": "./src/generators/component/component#componentGenerator", "schema": { "$schema": "http://json-schema.org/schema", "cli": "nx", "$id": "NxReactComponent", "title": "Create a React Component", "description": "Create a React Component for Nx.", "type": "object", "examples": [ { "command": "nx g component my-component --project=mylib", "description": "Generate a component in the `mylib` library" }, { "command": "nx g component my-component --project=mylib --classComponent", "description": "Generate a class component in the `mylib` library" } ], "properties": { "project": { "type": "string", "description": "The name of the project.", "alias": "p", "$default": { "$source": "projectName" }, "x-prompt": "What is the name of the project for this component?", "x-priority": "important" }, "name": { "type": "string", "description": "The name of the component.", "$default": { "$source": "argv", "index": 0 }, "x-prompt": "What name would you like to use for the component?", "x-priority": "important" }, "style": { "description": "The file extension to be used for style files.", "type": "string", "alias": "s", "default": "css", "x-prompt": { "message": "Which stylesheet format would you like to use?", "type": "list", "items": [ { "value": "css", "label": "CSS" }, { "value": "scss", "label": "SASS(.scss) [ http://sass-lang.com ]" }, { "value": "less", "label": "LESS [ http://lesscss.org ]" }, { "value": "styled-components", "label": "styled-components [ https://styled-components.com ]" }, { "value": "@emotion/styled", "label": "emotion [ https://emotion.sh ]" }, { "value": "styled-jsx", "label": "styled-jsx [ https://www.npmjs.com/package/styled-jsx ]" }, { "value": "none", "label": "None" }, { "value": "styl", "label": "Stylus(.styl) [ http://stylus-lang.com ] (DEPRECATED)" } ] } }, "js": { "type": "boolean", "description": "Generate JavaScript files rather than TypeScript files.", "default": false }, "skipTests": { "type": "boolean", "description": "When true, does not create `spec.ts` test files for the new component.", "default": false, "x-priority": "internal" }, "directory": { "type": "string", "description": "Create the component under this directory (can be nested).", "alias": "dir", "x-priority": "important" }, "flat": { "type": "boolean", "description": "Create component at the source root rather than its own directory.", "default": false }, "export": { "type": "boolean", "description": "When true, the component is exported from the project `index.ts` (if it exists).", "alias": "e", "default": false, "x-prompt": "Should this component be exported in the project?" }, "pascalCaseFiles": { "type": "boolean", "description": "Use pascal case component file name (e.g. `App.tsx`).", "alias": "P", "default": false }, "pascalCaseDirectory": { "type": "boolean", "description": "Use pascal case directory name (e.g. `App/App.tsx`).", "alias": "R", "default": false }, "classComponent": { "type": "boolean", "alias": "C", "description": "Use class components instead of functional component.", "default": false }, "routing": { "type": "boolean", "description": "Generate a library with routes." }, "globalCss": { "type": "boolean", "description": "Default is `false`. When `true`, the component is generated with `*.css`/`*.scss` instead of `*.module.css`/`*.module.scss`.", "default": false }, "fileName": { "type": "string", "description": "Create a component with this file name." }, "inSourceTests": { "type": "boolean", "default": false, "description": "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" }, "skipFormat": { "description": "Skip formatting files.", "type": "boolean", "default": false, "x-priority": "internal" } }, "required": ["name", "project"], "presets": [] }, "description": "Create a React component.", "aliases": ["c"], "implementation": "/packages/react/src/generators/component/component#componentGenerator.ts", "hidden": false, "path": "/packages/react/src/generators/component/schema.json", "type": "generator" }