{"id":25042168,"url":"https://github.com/nhope123/zymble","last_synced_at":"2026-04-30T00:07:07.061Z","repository":{"id":266309424,"uuid":"897170695","full_name":"nhope123/zymble","owner":"nhope123","description":"Vs Code extension that streamlines the React workflow by offering commands to quickly generate React components and hooks.","archived":false,"fork":false,"pushed_at":"2024-12-29T23:44:38.000Z","size":2915,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-30T22:30:32.717Z","etag":null,"topics":["generate-code","prettier-config","react-component","react-hooks","setup-script","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nhope123.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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":"2024-12-02T06:49:42.000Z","updated_at":"2025-01-25T22:19:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"7fc7c3ab-db0f-4d38-874e-edfbdc26aa7e","html_url":"https://github.com/nhope123/zymble","commit_stats":null,"previous_names":["nhope123/zymble"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nhope123/zymble","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhope123%2Fzymble","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhope123%2Fzymble/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhope123%2Fzymble/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhope123%2Fzymble/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nhope123","download_url":"https://codeload.github.com/nhope123/zymble/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nhope123%2Fzymble/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32448889,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T22:27:22.272Z","status":"ssl_error","status_checked_at":"2026-04-29T22:10:49.234Z","response_time":110,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["generate-code","prettier-config","react-component","react-hooks","setup-script","vscode-extension"],"created_at":"2025-02-06T04:07:30.707Z","updated_at":"2026-04-30T00:07:07.031Z","avatar_url":"https://github.com/nhope123.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zymble ![Zymble Logo](src/assets/logo.png)\n\n## Description\n\nZymble is a VS Code extension that simplifies the React workflow by providing commands to generate React components and hooks with ease.\n\n## Commands\n\n- **Create React Component**\n- **Create React Hook**\n\n## Features\n\n- **Create React Component**:\n\n  - Generate a folder from the component name.\n  - Generate a React functional components with or without props.\n  - Generate a component test file.\n  - Generate a types file for components with props.\n  - The file extensions depending on TypeScript installation:\n    - Component and test files are `.jsx` or `.tsx`.\n    - Type files are `.js` or `.ts`.\n\n- **Create React Hook**\n\n  - Generate a folder from the hook name in the hooks folder or a User selected folder.\n  - Generate custom React hooks with optional useState and useEffect.\n  - Generate a hook test file.\n  - Generate a types file for a Typescript hook.\n  - The file extensions depending on TypeScript installation:\n    - Hook and test files are `.jsx` or `.tsx`.\n    - Type files are `.js` or `.ts`.\n\n- **Seamless integration with VS Code**\n\n## Screenshots\n\n\u003c!-- ![Generate Component](images/generate-component.png)\n![Generate Hook](images/generate-hook.png) --\u003e\n\n## Instructions\n\n### Download installation file\n\n1. Open the [package folder](https://github.com/nhope123/zymble/tree/main/packages) and select the `zymble\u003cversion\u003e.vsix`.\n2. Download and save the raw file to your local directory.\n\n### Install Extension\n\n1. Open `vscode`\n2. Open the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window.\n3. Click the `Views and more Actions` menu to the right of the Extension refresh button.\n4. At the bottom, click the `Install from VSIX`\n5. Locate and select the `zymble-\u003cversion\u003e` installation file\n6. Click install\n7. View the extension by Typing `zymble` in the extension search\n\n### Cloning the Repository\n\n```sh\ngit clone https://github.com/nhope123/zymble.git\ncd zymble\nyarn install\n```\n\n### Running in Debug Mode\n\n1. Open the project in Visual Studio Code.\n2. Press `F5` to open a new window with your extension loaded.\n\n### How to Run the Commands\n\n1. From the Command Palette:\n   - Open the Command Palette by pressing Ctrl+Shift+P.\n   - Type the name of the extension / command (e.g., Zymble: Create Component) and select it from the list.\n2. Pressing F1 and Typing the Name of the Command:\n   - Press F1 to open the Command Palette.\n   - Type the name of the extension / command (e.g., Zymble: Create Component) and select it from the list.\n3. Right-Click the Workspace Folder Tree in a React or Prettier Project:\n   - Right-click on the workspace folder in the Explorer view.\n   - If the project is a React or Prettier project, the context menu will show options based on the isReactProject and noPrettierConfig contexts set by the commands.\n\n### Package the Extension\n\n1. Run `yarn package`\n2. Locate extension file in `packages/` folder.\n\n\u003c!-- ## Extension Settings\n\nThis extension contributes the following settings:\n\n- `zymble.enable`: Enable/disable this extension.\n- `zymble.someSetting`: Description of what this setting does. --\u003e\n\n\u003c!-- ## Release Notes\n\n### 1.0.0\n\n- Initial release of Zymble.\n\n### 1.0.1\n\n- Fixed issue #.\n\n### 1.1.0\n\n- Added features X, Y, and Z.\n\n--- --\u003e\n\n[MIT License](https://github.com/nhope123/zymble/blob/main/LICENSE.md)\n\n**Enjoy!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnhope123%2Fzymble","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnhope123%2Fzymble","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnhope123%2Fzymble/lists"}