{"id":40028732,"url":"https://github.com/arminbro/generate-react-cli","last_synced_at":"2026-04-08T03:05:57.085Z","repository":{"id":35048229,"uuid":"197312942","full_name":"arminbro/generate-react-cli","owner":"arminbro","description":"A simple React CLI to generate components instantly and more.","archived":false,"fork":false,"pushed_at":"2026-04-06T20:43:55.000Z","size":2574,"stargazers_count":415,"open_issues_count":6,"forks_count":68,"subscribers_count":4,"default_branch":"master","last_synced_at":"2026-04-06T22:22:32.830Z","etag":null,"topics":["build-tools","cli","react","scaffolding"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/generate-react-cli","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arminbro.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2019-07-17T04:07:56.000Z","updated_at":"2026-04-01T06:43:47.000Z","dependencies_parsed_at":"2023-11-18T20:22:36.984Z","dependency_job_id":"3d55c52b-fd5a-4bc6-8ab6-c17a0ff19554","html_url":"https://github.com/arminbro/generate-react-cli","commit_stats":{"total_commits":315,"total_committers":19,"mean_commits":16.57894736842105,"dds":"0.21904761904761905","last_synced_commit":"e7aae570ebd12b79a2b7197f578f5b3d346fbafb"},"previous_names":[],"tags_count":100,"template":false,"template_full_name":null,"purl":"pkg:github/arminbro/generate-react-cli","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arminbro%2Fgenerate-react-cli","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arminbro%2Fgenerate-react-cli/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arminbro%2Fgenerate-react-cli/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arminbro%2Fgenerate-react-cli/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arminbro","download_url":"https://codeload.github.com/arminbro/generate-react-cli/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arminbro%2Fgenerate-react-cli/sbom","scorecard":{"id":207583,"data":{"date":"2025-08-11","repo":{"name":"github.com/arminbro/generate-react-cli","commit":"cd914a650dcc4534b735da0e8e9b73c0adf8aba8"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.8,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Code-Review","score":0,"reason":"Found 0/9 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/publish.yml:1","Warn: no topLevel permission defined: .github/workflows/repo-pruner.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":4,"reason":"dependency not pinned by hash detected -- score normalized to 4","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/arminbro/generate-react-cli/publish.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/arminbro/generate-react-cli/publish.yml/master?enable=pin","Warn: third-party GitHubAction not pinned by hash: .github/workflows/repo-pruner.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/arminbro/generate-react-cli/repo-pruner.yml/master?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   0 out of   1 third-party GitHubAction dependencies pinned","Info:   1 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Packaging","score":10,"reason":"packaging workflow detected","details":["Info: Project packages its releases by way of GitHub Actions.: .github/workflows/publish.yml:8"],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 28 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":3,"reason":"7 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-x4c5-c7rf-jjgv","Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q","Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38","Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T00:06:48.704Z","repository_id":35048229,"created_at":"2025-08-17T00:06:48.704Z","updated_at":"2025-08-17T00:06:48.704Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31537792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T16:28:08.000Z","status":"online","status_checked_at":"2026-04-08T02:00:06.127Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["build-tools","cli","react","scaffolding"],"created_at":"2026-01-19T04:05:27.931Z","updated_at":"2026-04-08T03:05:57.080Z","avatar_url":"https://github.com/arminbro.png","language":"JavaScript","readme":"# Generate React CLI\n\n[![License](https://img.shields.io/npm/l/express.svg)](https://github.com/arminbro/generate-react-cli/blob/master/LICENSE)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/arminbro/generate-react-cli/master/docs/assets/generate-react-cli.svg?raw=true\"/\u003e\n\u003c/p\u003e\n\nA CLI tool to speed up productivity in React projects by generating components instantly with configurable templates.\n\n## Table of Contents\n\n- [Quick Start](#quick-start)\n- [Requirements](#requirements)\n- [Config File](#config-file)\n- [Generate Components](#generate-components)\n- [Options](#options)\n- [Custom Component Types](#custom-component-types)\n- [Custom Component Templates](#custom-component-templates)\n- [Template Keywords](#template-keywords)\n- [Custom Component Files](#custom-component-files)\n- [Advanced: Custom Directory](#advanced-custom-directory)\n- [License](#license)\n\n## Quick Start\n\n```bash\n# Generate your first component (creates config on first run)\nnpx generate-react-cli component Box\n\n# Or install globally\nnpm i -g generate-react-cli\ngenerate-react component Button\n```\n\n## Requirements\n\n- Node.js 22 or higher\n- npm 10 or higher\n\n## Config File\n\nWhen you run GRC within your project the first time, it will ask you a series of questions to customize the CLI for your project needs (this will create a `generate-react-cli.json` config file).\n\n```json\n{\n  \"usesTypeScript\": true,\n  \"usesCssModule\": true,\n  \"cssPreprocessor\": \"scss\",\n  \"testLibrary\": \"Testing Library\",\n  \"component\": {\n    \"default\": {\n      \"path\": \"src/components\",\n      \"withLazy\": false,\n      \"withStory\": false,\n      \"withStyle\": true,\n      \"withTest\": true\n    }\n  }\n}\n```\n\n**Test library options:**\n\n| Option | Description |\n|--------|-------------|\n| `Testing Library` | Uses [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) |\n| `Vitest` | Uses [Vitest](https://vitest.dev/) with React Testing Library |\n| `None` | Basic tests using React's createRoot API |\n\n## Generate Components\n\n```sh\nnpx generate-react-cli component Box\n```\n\nThis command will create a folder with your component name within your default (e.g., `src/components`) directory, and its corresponding files.\n\n```\n|-- /src\n    |-- /components\n        |-- /Box\n            |-- Box.js\n            |-- Box.css\n            |-- Box.test.js\n```\n\n## Options\n\nYou can override config rules using command-line options:\n\n```sh\nnpx generate-react-cli component Box --withTest=false\n```\n\n| Option | Description | Default |\n|--------|-------------|---------|\n| `--path` | Output directory for the component | Config value |\n| `--type` | [Custom component type](#custom-component-types) to use | `default` |\n| `--withLazy` | Generate a [lazy-loading](https://react.dev/reference/react/lazy) wrapper file | Config value |\n| `--withStory` | Generate a [Storybook](https://storybook.js.org) story file | Config value |\n| `--withStyle` | Generate a stylesheet file | Config value |\n| `--withTest` | Generate a test file | Config value |\n| `--dry-run` | Preview what will be generated without writing files | `false` |\n| `--flat` | Generate files directly in path without creating a folder | `false` |\n| `--customDirectory` | Override the component's folder name ([see below](#advanced-custom-directory)) | Component name |\n\n## Custom Component Types\n\nBy default, GRC uses the `component.default` configuration. You can define additional component types with their own rules:\n\n```json\n{\n  \"usesTypeScript\": false,\n  \"usesCssModule\": true,\n  \"cssPreprocessor\": \"scss\",\n  \"testLibrary\": \"Testing Library\",\n  \"component\": {\n    \"default\": {\n      \"path\": \"src/components\",\n      \"withLazy\": false,\n      \"withStory\": false,\n      \"withStyle\": true,\n      \"withTest\": true\n    },\n    \"page\": {\n      \"path\": \"src/pages\",\n      \"withLazy\": true,\n      \"withStory\": false,\n      \"withStyle\": true,\n      \"withTest\": true\n    },\n    \"layout\": {\n      \"path\": \"src/layout\",\n      \"withLazy\": false,\n      \"withStory\": false,\n      \"withStyle\": false,\n      \"withTest\": true\n    }\n  }\n}\n```\n\nGenerate components with custom types:\n\n```sh\nnpx generate-react-cli component HomePage --type=page\nnpx generate-react-cli component Sidebar --type=layout\n```\n\n## Custom Component Templates\n\nCreate your own templates that GRC uses instead of the built-in ones. Add a `customTemplates` object to any component type:\n\n```json\n{\n  \"component\": {\n    \"default\": {\n      \"path\": \"src/components\",\n      \"withStyle\": true,\n      \"withTest\": true,\n      \"customTemplates\": {\n        \"component\": \"templates/TemplateName.js\",\n        \"style\": \"templates/TemplateName.module.css\",\n        \"test\": \"templates/TemplateName.test.js\"\n      }\n    }\n  }\n}\n```\n\nExample custom component template:\n\n```jsx\n// templates/TemplateName.js\n\nimport styles from './TemplateName.module.css';\n\nconst TemplateName = () =\u003e (\n  \u003cdiv className={styles.TemplateName} data-testid=\"TemplateName\"\u003e\n    \u003ch1\u003eTemplateName component\u003c/h1\u003e\n  \u003c/div\u003e\n);\n\nexport default TemplateName;\n```\n\nExample custom test template:\n\n```jsx\n// templates/TemplateName.test.js\n\nimport { createRoot } from 'react-dom/client';\nimport TemplateName from './TemplateName';\n\nit('should mount', () =\u003e {\n  const container = document.createElement('div');\n  const root = createRoot(container);\n  root.render(\u003cTemplateName /\u003e);\n  root.unmount();\n});\n```\n\nAll template types are optional. If you don't specify a custom template for a file type, GRC uses its built-in template.\n\n## Template Keywords\n\nUse these keywords in your custom templates and filenames. GRC replaces them with the component name in various formats:\n\n| Keyword | Output Format | Example (`Box`) |\n|---------|--------------|-----------------|\n| `templatename` | raw (as typed) | `Box` |\n| `TemplateName` | PascalCase | `Box` |\n| `templateName` | camelCase | `box` |\n| `template-name` | kebab-case | `box` |\n| `template_name` | snake_case | `box` |\n| `TEMPLATE_NAME` | UPPER_SNAKE | `BOX` |\n| `TEMPLATENAME` | UPPERCASE | `BOX` |\n\n## Custom Component Files\n\nAdd custom files beyond the built-in options (`withStyle`, `withTest`, `withStory`, `withLazy`).\n\nExample: Adding an `index.js` barrel file for cleaner imports:\n\n```json\n{\n  \"component\": {\n    \"default\": {\n      \"path\": \"src/components\",\n      \"withStyle\": true,\n      \"withTest\": true,\n      \"withIndex\": true,\n      \"customTemplates\": {\n        \"index\": \"templates/index.js\"\n      }\n    }\n  }\n}\n```\n\n```jsx\n// templates/index.js\nexport { default } from './TemplateName';\n```\n\nCustom files require corresponding custom templates in `customTemplates`.\n\n## Advanced: Custom Directory\n\nOverride the generated component's folder name using `customDirectory`. This is useful when you need naming conventions that differ from the component name.\n\nExample: Generate a `Theme` provider where files live in a `ThemeProvider` folder:\n\n```json\n{\n  \"component\": {\n    \"provider\": {\n      \"path\": \"src/providers\",\n      \"withTest\": true,\n      \"customDirectory\": \"TemplateNameProvider\",\n      \"customTemplates\": {\n        \"component\": \"templates/TemplateNameProvider.tsx\"\n      }\n    }\n  }\n}\n```\n\n```sh\nnpx generate-react-cli component Theme --type=provider\n# Creates: src/providers/ThemeProvider/ThemeProvider.tsx\n```\n\nYou can also pass it as a CLI option:\n\n```sh\nnpx generate-react-cli component Box --customDirectory=TemplateNameLayout\n```\n\n## License\n\nGenerate React CLI is open source software [licensed as MIT](https://github.com/arminbro/generate-react-cli/blob/master/LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farminbro%2Fgenerate-react-cli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farminbro%2Fgenerate-react-cli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farminbro%2Fgenerate-react-cli/lists"}