{"id":13452167,"url":"https://github.com/snaerth/create-react-component-folder","last_synced_at":"2026-01-12T02:22:20.903Z","repository":{"id":29227668,"uuid":"120527413","full_name":"snaerth/create-react-component-folder","owner":"snaerth","description":"Creates react component folder structure","archived":false,"fork":false,"pushed_at":"2023-01-08T00:13:50.000Z","size":1894,"stargazers_count":165,"open_issues_count":12,"forks_count":47,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-11-23T03:03:12.534Z","etag":null,"topics":["create-react-app","create-react-component","create-react-native-app","npm-package","react","react-component","scaffold"],"latest_commit_sha":null,"homepage":null,"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/snaerth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-06T21:48:59.000Z","updated_at":"2025-09-11T02:47:19.000Z","dependencies_parsed_at":"2023-01-14T14:24:16.679Z","dependency_job_id":null,"html_url":"https://github.com/snaerth/create-react-component-folder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/snaerth/create-react-component-folder","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snaerth%2Fcreate-react-component-folder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snaerth%2Fcreate-react-component-folder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snaerth%2Fcreate-react-component-folder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snaerth%2Fcreate-react-component-folder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/snaerth","download_url":"https://codeload.github.com/snaerth/create-react-component-folder/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/snaerth%2Fcreate-react-component-folder/sbom","scorecard":{"id":834139,"data":{"date":"2025-08-11","repo":{"name":"github.com/snaerth/create-react-component-folder","commit":"67a3a1baf9795b47162677e5b50196a831b89cbd"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2,"checks":[{"name":"Code-Review","score":2,"reason":"Found 7/29 approved changesets -- score normalized to 2","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":"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":"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":-1,"reason":"no workflows found","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":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"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":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"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":-1,"reason":"no dependencies found","details":null,"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":"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":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"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":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 8 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":0,"reason":"17 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7"],"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-23T18:30:44.571Z","repository_id":29227668,"created_at":"2025-08-23T18:30:44.571Z","updated_at":"2025-08-23T18:30:44.571Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28332056,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"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":["create-react-app","create-react-component","create-react-native-app","npm-package","react","react-component","scaffold"],"created_at":"2024-07-31T07:01:15.627Z","updated_at":"2026-01-12T02:22:20.878Z","avatar_url":"https://github.com/snaerth.png","language":"JavaScript","readme":"# Create React Component folder\n\n[![NPM version](https://img.shields.io/npm/v/create-react-component-folder.svg?style=flat)](https://npmjs.com/package/create-react-component-folder)\n[![NPM downloads](https://img.shields.io/npm/dm/create-react-component-folder.svg?style=flat)](https://npmjs.com/package/create-react-component-folder)\n\n## About\n\nCreate React Component folder works on macOS, Windows, and Linux.\u003cbr\u003e\nIt creates **React** or **React Native** component folder structure with one command.\u003cbr\u003e\nThere is also support for Typescript, React Native, Less and Sass.\n\n## Quick Overview\n\n```sh\n$ npm install --save-dev create-react-component-folder\n$ npx crcf myComponent\n```\n\n_([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://github.com/snaerth/create-react-component-folder/blob/master/docs/npx_instructions.md))_\n\n\u003cp align='center'\u003e\n\u003cimg src='https://github.com/snaerth/create-react-component-folder/blob/master/docs/crcf_video.svg' width='600' alt='npx crcf myComponent'\u003e\n\u003c/p\u003e\n\n## Tutorial\n\n[Read the artice on Medium](https://medium.com/@snrseljanroddsson/create-multiple-react-folder-components-in-one-command-1411cd6bd1ce)\n\n## Installation\n\n```sh\n$ npm install --save-dev create-react-component-folder\n```\n\n## Creating a single component\n\n```sh\n$ npx crcf myComponent\n$ npx crcf components/myComponent\n```\n\n## Output single\n\n\u003cp align='center'\u003e\n\u003cimg src='https://github.com/snaerth/create-react-component-folder/blob/master/docs/single2.png?raw=true' width='600' /\u003e\n\u003c/p\u003e\n\n## Creating multiple components\n\n```sh\n$ npx crcf components/header footer button navigation\n```\n\n## Output multiple\n\n\u003cp align='center'\u003e\n\u003cimg src='https://github.com/snaerth/create-react-component-folder/blob/master/docs/multiple2.png?raw=true'  width='600' /\u003e\n\u003c/p\u003e\n\n## Component folder structure\n\n```sh\nmyComponent\n├── index.js\n├── myComponent.js\n├── myComponent.css\n├── myComponent.test.handlebars\n```\n\n### With storybook enabled\n\n```sh\nmyComponent\n├── index.js\n├── myComponent.js\n├── myComponent.css\n├── myComponent.test.handlebars\n├── myComponent.stories.js\n```\n\n## Setting default config\n\nThere is support for setting default config options, so you only have to set you desired config once. This makes creating your components even easier. All you have to do is follow one of these three options.\n\nIn your package.json, add a **\"crcf\"** property key with array of default config options\n\n\"stories\" is to enable story book component\n\n\"spec\" to have the file extensions\n\n```sh\n\"crcf\": [\n  \"scss\",\n  \"proptypes\",\n  \"stories\",\n  \"spec\"\n]\n```\n\nCreate a rc file named **.crcfrc** in the root of your project and insert a array of default config options in that file\n\n```sh\n[\n  \"scss\",\n  \"proptypes\",\n  \"stories\"\n]\n```\n\nCreate a config file named **.crcf.config.js** in the root of your project and insert a array of default config options\n\n```sh\n[\n  \"scss\",\n  \"proptypes\"\n  \"stories\"\n]\n```\n\nSo now all you have to do is type **npx crcf componentName** and you will get all your default options when you create a component or multiple components. Here below you can see all the options.\n\n```sh\n[\n  \"typescript\",\n  \"scss\",\n  \"less\",\n  \"nocss\",\n  \"notest\",\n  \"reactnative\",\n  \"createindex\",\n  \"uppercase\",\n  \"jsx\",\n  \"proptypes\",\n  \"stories\",\n  \"nosemi\",\n  \"singlequote\",\n  \"cssmodules\",\n  \"namedexports\",\n  \"graphql\",\n  \"stylesext\",\n  {\n    \"output\": \"base/directory/to/place/created/components\"\n  }\n]\n```\n\n## Creating index.js file for multiple component imports\n\n```sh\n$ npx crcf --createindex components/myComponent/\n```\n\n## Output in index.js file for multiple component imports\n\n\u003cp align='center'\u003e\n\u003cimg src='https://github.com/snaerth/create-react-component-folder/blob/master/docs/index2.png?raw=true' width='600'/\u003e\n\u003c/p\u003e\n\n## Publishing templates\n\nIf the project you are working on always needs components structured differently, we've got you covered.\n\nPublishing the templates allows you to have finer control over the generated components and content. Published templates use \u003chandlebars\u003e[https://handlebarsjs.com/] to generate the different components.\n\n```sh\n$ npx crcf publish-templates\n```\n\nThe templates will be copied to a directory `.crcf/templates` relative to the directory you ran the script from.\n\n### Modifying templates\n\nTemplates are always passed a number of variables to help you generate templates when certain flags / config options have been enabled.\n\n| Variable | Type | Description |\n|----------|------|-------------|\n| name | string | The generated name of the component |\n| typescript | boolean | `true` when `typescript` is enabled |\n| native | boolean | `true` when building react native components |\n| proptypes | boolean | `true` when `proptypes` is enabled |\n| export | boolean | `true` when `namedexports` is enabled |\n\n**Tests and stories** have extra variables (**NOT** available in functional or class component templates)\n\n| Variable | Type | Description |\n|----------|------|-------------|\n| nameLowercase | string | The generated name of the component in lowercase so it can be interpolated in sentences. |\n| uppercase | boolean | `true` when `uppercase` is enabled\n\n## Options\n\n```sh\n$ npx crcf create --help\n\n  Usage: index [options]\n\n  Options:\n\n    -V, --version       output the version number\n    --typescript        Creates Typescript component and files\n    --nocss             No css file\n    --notest            No test file\n    --cssmodules        Creates css/less/scss file with .module extensions. Example\n    --reactnative       Creates React Native components\n    --createindex       Creates index.js file for multple component imports\n    --graphql           Creates a index.graphql file\n    --stylesext         Creates a Component.styles.(ts|js) file\n    -f, --functional    Creates React stateless functional component\n    -j, --jsx           Creates the component file with .jsx extension\n    -l, --less          Adds .less file to component\n    -s, --scss          Adds .scss file to component\n    -p, --proptypes     Adds prop-types to component\n    -u, --uppercase     Component files start on uppercase letter\n    -h, --help          output usage information\n    -sb, --stories      Add Storie file to component\n    -ns, --nosemi       No semicolons\n    -sq, --singlequote  Formats output files with single quotes\n    -x, --namedexports  Creates files using named exports\n```\n\n## Author\n\n- [Snær Seljan Þóroddsson](https://github.com/snaerth)\n\n## License\n\nMIT\n","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnaerth%2Fcreate-react-component-folder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsnaerth%2Fcreate-react-component-folder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsnaerth%2Fcreate-react-component-folder/lists"}