{"id":30705950,"url":"https://github.com/yalogica/react-isolated-component-factory","last_synced_at":"2026-05-05T04:36:53.078Z","repository":{"id":312041564,"uuid":"1046062079","full_name":"yalogica/react-isolated-component-factory","owner":"yalogica","description":"This prototype illustrates how to create self-contained React components with isolated state management using Zustand and external API integration. ","archived":false,"fork":false,"pushed_at":"2025-08-28T12:55:09.000Z","size":11,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-28T12:56:05.130Z","etag":null,"topics":["boilerplate","isolate","react","typescript","vite","zustand"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/yalogica.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-28T06:10:32.000Z","updated_at":"2025-08-28T12:55:12.000Z","dependencies_parsed_at":"2025-08-28T12:56:16.427Z","dependency_job_id":"7515185f-66f4-4eb6-9ecd-aca16596a5e4","html_url":"https://github.com/yalogica/react-isolated-component-factory","commit_stats":null,"previous_names":["yalogica/react-isolated-component-factory"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/yalogica/react-isolated-component-factory","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yalogica%2Freact-isolated-component-factory","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yalogica%2Freact-isolated-component-factory/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yalogica%2Freact-isolated-component-factory/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yalogica%2Freact-isolated-component-factory/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yalogica","download_url":"https://codeload.github.com/yalogica/react-isolated-component-factory/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yalogica%2Freact-isolated-component-factory/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32635944,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"online","status_checked_at":"2026-05-05T02:00:06.033Z","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":["boilerplate","isolate","react","typescript","vite","zustand"],"created_at":"2025-09-02T19:52:06.049Z","updated_at":"2026-05-05T04:36:53.062Z","avatar_url":"https://github.com/yalogica.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Isolated Component Factory\n\n## Overview\n\nReact Isolated Component Factory is a demonstration of creating self-contained React components with isolated state management and external API access. This prototype showcases a pattern for building components that maintain their own Zustand stores while exposing controlled APIs for external interaction.\n\n## Key Features\n\n- **Isolated State Management**: Each component instance maintains its own Zustand store\n- **External API Access**: Components expose controlled APIs for external manipulation\n- **Factory Pattern**: Uses a factory approach for creating component instances\n- **Context Integration**: Leverages React Context for API propagation\n- **TypeScript Support**: Fully typed for better development experience\n\n## Installation\n\n```bash\ngit clone \u003crepository-url\u003e\ncd react-isolated-component-factory\nnpm install\nnpm run dev\n```\n\n## Usage\n\n```typescript\n// Creating component instances\ndocument.querySelectorAll('.panorama').forEach(panoramaEl =\u003e {\n    if (panoramaEl instanceof HTMLElement) {\n        const instance = createPanoramaInstance();\n        \n        instance.api.setBackground(getRandomColor());\n\n        const cleanup = instance.mount(panoramaEl);\n        instances.set(panoramaEl, cleanup);\n    }\n});\n\n// External manipulation\nsetTimeout(() =\u003e {\n    instances.forEach(instance =\u003e {\n        instance.api.setBackground(getRandomColor());\n    });\n}, 5000);\n```\n\n## Architecture\n\nThe solution implements a factory pattern that:\n1. Creates isolated Zustand stores for each component instance\n2. Generates external APIs for controlled manipulation\n3. Uses React Context to provide API access to components\n4. Maintains complete isolation between component instances\n\nThis pattern is particularly useful for applications requiring:\n- Multiple instances of the same component\n- External control of component behavior\n- Isolated state management per instance\n- Clean separation of concerns\n\n## License\n\n[MIT](LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyalogica%2Freact-isolated-component-factory","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyalogica%2Freact-isolated-component-factory","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyalogica%2Freact-isolated-component-factory/lists"}