nx/docs/generated/packages/react/generators/component.json

{
  "name": "component",
  "factory": "./src/generators/component/component#componentGeneratorInternal",
  "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",
    "properties": {
      "project": {
        "type": "string",
        "description": "The name of the project.",
        "alias": "p",
        "$default": { "$source": "projectName" },
        "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. The project will be determined from the directory provided. It will be removed in Nx v18."
      },
      "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" }
          ]
        }
      },
      "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": "The directory at which to create the component file. When `--nameAndDirectoryFormat=as-provided`, it will be relative to the current working directory. Otherwise, it will be relative to the project root.",
        "alias": "dir",
        "x-priority": "important"
      },
      "nameAndDirectoryFormat": {
        "description": "Whether to generate the component in the directory as provided, relative to the current working directory and ignoring the project (`as-provided`) or generate it using the project and directory relative to the workspace root (`derived`).",
        "type": "string",
        "enum": ["as-provided", "derived"]
      },
      "flat": {
        "type": "boolean",
        "description": "Create component at the source root rather than its own directory.",
        "default": false,
        "x-deprecated": "Provide the `directory` option instead and use the `as-provided` format. This option will be removed in Nx v18."
      },
      "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,
        "x-deprecated": "Provide the `name` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
      },
      "pascalCaseDirectory": {
        "type": "boolean",
        "description": "Use pascal case directory name (e.g. `App/App.tsx`).",
        "alias": "R",
        "default": false,
        "x-deprecated": "Provide the `directory` in pascal-case and use the `as-provided` format. This option will be removed in Nx v18."
      },
      "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"],
    "examplesFile": "## Examples\n\n{% tabs %}\n{% tab label=\"Simple Component\" %}\n\nCreate a component named `my-component` under the `libs/ui` project:\n\n```shell\nnx g @nx/react:component libs/ui/src/my-component\n```\n\n{% /tab %}\n\n{% tab label=\"Standalone Component\" %}\n\nCreate a class component named `my-component` under the `libs/ui` project:\n\n```shell\nnx g @nx/react:component libs/ui/src/my-component --classComponent\n```\n\n{% /tab %}\n",
    "presets": []
  },
  "description": "Create a React component.",
  "aliases": ["c"],
  "implementation": "/packages/react/src/generators/component/component#componentGeneratorInternal.ts",
  "hidden": false,
  "path": "/packages/react/src/generators/component/schema.json",
  "type": "generator"
}