{"id":20375557,"url":"https://github.com/benjaminwfox/scaffold-react-component","last_synced_at":"2025-06-15T10:33:18.541Z","repository":{"id":43814796,"uuid":"178087277","full_name":"BenjaminWFox/scaffold-react-component","owner":"BenjaminWFox","description":"A Visual Studio Code extension adding context options to the Explorer View for scaffolding react components. ","archived":false,"fork":false,"pushed_at":"2022-12-08T19:35:25.000Z","size":1571,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-11T21:49:45.519Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"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/BenjaminWFox.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-27T23:00:41.000Z","updated_at":"2020-09-25T15:03:17.000Z","dependencies_parsed_at":"2023-01-25T17:31:51.021Z","dependency_job_id":null,"html_url":"https://github.com/BenjaminWFox/scaffold-react-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/BenjaminWFox/scaffold-react-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenjaminWFox%2Fscaffold-react-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenjaminWFox%2Fscaffold-react-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenjaminWFox%2Fscaffold-react-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenjaminWFox%2Fscaffold-react-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BenjaminWFox","download_url":"https://codeload.github.com/BenjaminWFox/scaffold-react-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BenjaminWFox%2Fscaffold-react-component/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259960396,"owners_count":22938054,"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":[],"created_at":"2024-11-15T01:31:35.114Z","updated_at":"2025-06-15T10:33:18.498Z","avatar_url":"https://github.com/BenjaminWFox.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Scaffold React Component\n\nThis VSCode extension adds two context menu items in the Explorer view to quickly create React components.\n\n## To use\n\nAfter installation, right-clicking on a folder in the Explorer View will give you options for:\n\n- New Class Component\n- New Functional Component\n\nSelecting either option brings up an input where you can enter your component name. It expects that the component name is PascalCase:\n\n`MyNewComponent`\n\nFor the folder \u0026 files, the PascalCase name will be transformed to lowercase with dashes\n\n`my-new-component`\n\nThe folder/file structure created by default is:\n\n```\nmy-new-component            // parent folder\n- index.js                  // for cleaner imports of the component elsewhere\n- my-new-component.js       // component\n- my-new-component.test.js  // for component tests\n```\n\n## Extension Settings\n\nThis extension has one setting for specifying a path to custom templates:\n\n* `scaffoldreactcomponent.pathToTemplates`: If you copy \u0026 modify the templates, add the path to your custom template folder here.\n\nUse `__StubComponentName__` in your custom templates in place of the intended component name. \n\nIn a custom template folder you may omit (or leave empty) the index \u0026 test files, if desired.\n\n## Template File Naming \u0026 Structure\n\nThe default templates assumes you are using React and PropTypes, and testing with Jest.\n\n### template-index.js\n\n```\nimport _ from './__StubComponentName__'\n\nexport default _\n```\n\n### template-component-test.js\n\n```\nimport __StubComponentName__ from '.'\n\ndescribe('The __StubComponentName__ component', () =\u003e {\n  // TODO: Implement a real test\n  it('Should import successfully', () =\u003e {    \n    console.warn('TODO: Implement a real test', __StubComponentName__)\n\n    expect(__StubComponentName__).toBeDefined()\n  })\n})\n```\n\n### template-class-component.js\n\n```\nimport React from 'react'\nimport PropTypes from 'prop-types'\n\nclass __StubComponentName__ extends React.Component {\n  state = {}\n\n  render() {\n    return (\n      \u003cdiv\u003econtent\u003c/div\u003e\n    )\n  }\n}\n\n__StubComponentName__.propTypes = {}\n\nexport default __StubComponentName__\n```\n\n### template-functional-component.js\n\n```\nimport React from 'react'\nimport PropTypes from 'prop-types'\n\nconst __StubComponentName__ = function __StubComponentName__() {\n  return (\n    \u003cdiv\u003econtent\u003c/div\u003e\n  )\n}\n\n__StubComponentName__.propTypes = {}\n\nexport default __StubComponentName__\n```\n\n#### Mentions\n\nIcon crane graphic by [lavarmsg](https://www.vecteezy.com/members/lavarmsg) at Vecteezy.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjaminwfox%2Fscaffold-react-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbenjaminwfox%2Fscaffold-react-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbenjaminwfox%2Fscaffold-react-component/lists"}