{"id":18700575,"url":"https://github.com/codingcodax/new-comp","last_synced_at":"2025-11-08T22:30:30.687Z","repository":{"id":76741007,"uuid":"593858298","full_name":"codingcodax/new-comp","owner":"codingcodax","description":"An awesome CLI utility for quickly create new React components. ","archived":false,"fork":false,"pushed_at":"2024-04-15T19:42:24.000Z","size":197,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-17T01:32:11.628Z","etag":null,"topics":["cli","new-component","node"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codingcodax.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2023-01-27T01:44:14.000Z","updated_at":"2023-02-24T03:27:16.000Z","dependencies_parsed_at":"2024-04-13T23:28:09.851Z","dependency_job_id":null,"html_url":"https://github.com/codingcodax/new-comp","commit_stats":{"total_commits":63,"total_committers":2,"mean_commits":31.5,"dds":"0.015873015873015928","last_synced_commit":"c99ecd47161181eb3d8335544ca5e8271c575750"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingcodax%2Fnew-comp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingcodax%2Fnew-comp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingcodax%2Fnew-comp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingcodax%2Fnew-comp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codingcodax","download_url":"https://codeload.github.com/codingcodax/new-comp/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239565650,"owners_count":19660154,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["cli","new-component","node"],"created_at":"2024-11-07T11:38:08.184Z","updated_at":"2025-11-08T22:30:30.642Z","avatar_url":"https://github.com/codingcodax.png","language":"TypeScript","readme":"\u003cp align='center'\u003e\n  \u003ca href='https://github.com/codingcodax/slug'\u003e\n    \u003cimg src='./.github/assets/logo.png' width='80' height='80' /\u003e\n  \u003c/a\u003e\n\n  \u003ch3 align='center'\u003enew-comp\u003c/h3\u003e\n\n  \u003cp align='center'\u003e\n    \u003csamp\u003eAn awesome CLI utility for quickly create new React components.\u003c/samp\u003e\n    \u003cbr /\u003e\n    \u003ca href='https://www.npmjs.com/package/n-comp' rel='noopener noreferrer' target='_blank'\u003e\u003cstrong\u003eNMP Package\u003c/strong\u003e\u003c/a\u003e\n    \u003cbr /\u003e\n    \u003cbr /\u003e\n    \u003ca href='https://github.com/codingcodax/new-comp/issues/'\u003eFeature Request\u003c/a\u003e\n    ·\n    \u003ca href='https://github.com/codingcodax/new-comp/issues/'\u003eBug Report\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/p\u003e\n\n## Features\n\n- Create React components.\n- Choose between TypeScript and JavaScript.\n- Components can be function, arrow or class.\n- Even you can use your favorite ui library (personal whim).\n\n## Quickstart\n\nFrom your terminal run:\n\n```bash\n# install the package with NPM\n$ npx n-comp\n\n# or install it with YARN\n$ yarn n-comp\n```\n\n`cd` into your project's directory, and try creating a new component:]\n\n```bash\n$ new-component MyNewComponent\n```\n\nYour project will now have a new directory at `src/components/MyNewComponent`. This directory has two files:\n\n```javascript\n// `MyNewComponent/index.js`\nexport { default } from './MyNewComponent';\n```\n\n```javascript\n// `MyNewComponent/MyNewComponent.js`\nfunction MyNewComponent() {\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eMyNewComponent\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default MyNewComponent;\n```\n\nThese files will be formatted according to your Prettier configuration.\n\n## Configuration\n\nConfiguration can be done through 3 different ways:\n\n- Creating a global `.nc.config.json` in your home directory (`~/.nc.config.json`).\n- Creating a local `.nc.config.json` in your project's root directory.\n- Command-line arguments.\n\nThe resulting values are merged, with command-line values overwriting local values, and local values overwriting global ones.\n\n## API Reference\n\n### Language\n\nControls which language, JavaScript or TypeScript, should be used.\n\n- `ts` — creates a `.tsx` file (default).\n- `js` — creates a `.js` file.\n\n**Usage:**\nCommand line: `--lang \u003cvalue\u003e` or `-l \u003cvalue\u003e`\n\nJSON config: `{ \"lang\": \u003cvalue\u003e }`\n\n### Type\n\nControls which type of component, function, arrow or class should be used.\n\n- Function — use `function MyNewComponent() {}`\n- Arrow — use `const MyNewComponent = () =\u003e {}`\n- Class — use `class MyNewComponent extends React.Component {}`\n\n**Usage:**\nCommand line: `--type \u003cvalue\u003e` or `-t \u003cvalue\u003e`\n\nJSON config: `{ \"type\": \u003cvalue\u003e }`\n\n### UI Library\n\nControls which ui library, vanilla, Chakra UI or MUI should be used.\n\n- Vanilla — use `\u003cdiv\u003e` and `\u003cp\u003e` tags.\n- Chakra UI — use `\u003cBox\u003e` and `\u003cText\u003e` components.\n- Material UI — use `\u003cBox\u003e` and `\u003cTypography\u003e` components.\n\n**Usage:**\nCommand line: `--ui \u003cvalue\u003e`\n\nJSON config: `{ \"ui\": \u003cvalue\u003e }`\n\n### Directory\n\nControls the desired directory for the created component. Defaults to `src/components`\n\n**Usage:**\nCommand line: `--dir \u003cvalue\u003e` or `-d \u003cvalue\u003e`\n\nJSON config: `{ \"dir\": \u003cvalue\u003e }`\n\n## License\n\nLicensed under the [MIT license](./LICENSE.md)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingcodax%2Fnew-comp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingcodax%2Fnew-comp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingcodax%2Fnew-comp/lists"}