{"id":20509553,"url":"https://github.com/aminnairi/react-switch","last_synced_at":"2026-04-22T09:07:11.131Z","repository":{"id":168965707,"uuid":"644508990","full_name":"aminnairi/react-switch","owner":"aminnairi","description":"A simple JavaScript-like switch component for React written in TypeScript","archived":false,"fork":false,"pushed_at":"2023-06-03T12:46:25.000Z","size":49,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"development","last_synced_at":"2026-02-12T00:49:18.001Z","etag":null,"topics":["component","condition","library","react","switch"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@aminnairi/react-switch","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/aminnairi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-23T17:01:25.000Z","updated_at":"2023-05-24T21:05:27.000Z","dependencies_parsed_at":"2023-07-06T14:15:40.501Z","dependency_job_id":null,"html_url":"https://github.com/aminnairi/react-switch","commit_stats":null,"previous_names":["aminnairi/react-switch"],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/aminnairi/react-switch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aminnairi%2Freact-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aminnairi%2Freact-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aminnairi%2Freact-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aminnairi%2Freact-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aminnairi","download_url":"https://codeload.github.com/aminnairi/react-switch/tar.gz/refs/heads/development","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aminnairi%2Freact-switch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32128734,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T08:34:57.708Z","status":"ssl_error","status_checked_at":"2026-04-22T08:34:55.583Z","response_time":58,"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":["component","condition","library","react","switch"],"created_at":"2024-11-15T20:25:24.069Z","updated_at":"2026-04-22T09:07:11.117Z","avatar_url":"https://github.com/aminnairi.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @aminnairi/react-switch\n\nA simple JavaScript-like switch component for React written in TypeScript\n\n[![NPM](https://badgen.net/npm/v/@aminnairi/react-switch)](https://www.npmjs.com/package/@aminnairi/react-switch) [![Bundlephobia](https://badgen.net/bundlephobia/minzip/@aminnairi/react-switch)](https://bundlephobia.com/package/@aminnairi/react-switch) [![Snyk](https://badgen.net/snyk/aminnairi/react-switch)](https://github.com/aminnairi/react-switch/blob/development/sources/package.json)\n\n## Summary\n\n- [Requirements](#requirements)\n- [Quick Start](#quick-start)\n- [API](#api)\n  - [Switch](#switch)\n  - [Case](#case)\n  - [Default](#default)\n  - [DefaultSwitch](#defaultswitch)\n- [License](#license)\n- [Contributing](#contributing)\n- [Changelog](#changelog)\n\n## Requirements\n\n- [Node](https://nodejs.org/en)\n- [NPM](https://www.npmjs.com/)\n\n[Back to summary](#summary).\n\n## Quick Start\n\n```bash\nnpm install react react-dom @aminnairi/react-switch\nnpm install --save-dev vite @types/react @types/react-dom\n```\n\n```bash\ntouch main.tsx\n```\n\n```typescript\nimport React, { useEffect, useState } from 'react'\nimport { Switch, Case, Default, DefaultSwitch } from \"@aminnairi/react-switch\";\n\ninterface Article {\n  id: number;\n  title: string;\n  body: string;\n}\n\nexport const Main = () =\u003e {\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(\"\");\n  const [articles, setArticles] = useState\u003cArray\u003cArticle\u003e\u003e([]);\n\n  useEffect(() =\u003e {\n    fetch(\"https://jsonplaceholder.typicode.com/posts\").then(response =\u003e {\n      if (response.ok) {\n        return response.json();\n      }\n\n      return Promise.reject(new Error(\"Unable to fetch articles.\"));\n    }).then(json =\u003e {\n      setArticles(json);\n    }).catch((error: unknown) =\u003e {\n      setError(String(error));\n    }).finally(() =\u003e {\n      setLoading(false);\n    });\n  }, []);\n\n  return (\n    \u003cSwitch\u003e\n      \u003cCase when={loading}\u003e\n        \u003cp\u003eLoading your articles, please wait...\u003c/p\u003e\n      \u003c/Case\u003e\n      \u003cCase when={Boolean(error)}\u003e\n        \u003cp\u003eSomething went wrong: {error}\u003c/p\u003e\n      \u003c/Case\u003e\n      \u003cDefaultSwitch\u003e\n        \u003cCase when={articles.length === 0}\u003e\n          \u003cp\u003eThere is no articles to display.\u003c/p\u003e\n        \u003c/Case\u003e\n        \u003cCase when={articles.length === 1}\u003e\n          \u003cp\u003eYou have {articles.length} published article.\u003c/p\u003e\n        \u003c/Case\u003e\n        \u003cDefault\u003e\n          \u003cp\u003eYou have {articles.length} published articles.\u003c/p\u003e\n        \u003c/Default\u003e\n      \u003c/DefaultSwitch\u003e\n    \u003c/Switch\u003e\n  );\n};\n```\n\n```bash\ntouch index.tsx\n```\n\n```typescript\nimport React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { Main } from \"./main\";\n\nconst rootElement = document.getElementById(\"root\");\n\nif (!rootElement) {\n  throw new Error(\"Root element not found\");\n}\n\nconst root = createRoot(rootElement);\n\nroot.render(\n  \u003cMain /\u003e\n);\n```\n\n```bash\ntouch index.html\n```\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003cscript src=\"./index.tsx\" type=\"module\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n```bash\nnpx vite\n```\n\n[Back to summary](#summary).\n\n## API\n\n[Back to summary](#summary).\n\n### Switch\n\n```typescript\nimport { ReactNode } from \"react\";\n\nexport interface SwitchProps {\n  children: ReactNode;\n}\n\nexport declare const Switch: ({ children }: SwitchProps) =\u003e ReactNode;\n```\n\n[Back to summary](#summary).\n\n### Case\n\n```typescript\nimport { ReactNode } from \"react\";\n\nexport interface CaseProps {\n  when: boolean;\n  children: ReactNode;\n}\n\nexport declare const Case: ({ children }: CaseProps) =\u003e ReactNode;\n```\n\n[Back to summary](#summary).\n\n### Default\n\n```typescript\nimport { ReactNode } from \"react\";\n\nexport interface DefaultProps {\n  children: ReactNode;\n}\n\nexport declare const Default: ({ children }: DefaultProps) =\u003e ReactNode;\n```\n\n[Back to summary](#summary).\n\n### DefaultSwitch\n\n```typescript\nimport { ReactNode } from \"react\";\n\nexport declare const DefaultSwitch: ({ children }: SwitchProps) =\u003e ReactNode\n```\n\n[Back to summary](#summary).\n\n## License\n\nSee [`LICENSE`](https://github.com/aminnairi/react-switch/blob/development/LICENSE).\n\n\n[Back to summary](#summary).\n\n## Contributing\n\nSee [`CONTRIBUTING.md`](https://github.com/aminnairi/react-switch/blob/development/CONTRIBUTING.md).\n\n[Back to summary](#summary).\n\n## Changelog\n\nSee [`CHANGELOG.md`](https://github.com/aminnairi/react-switch/blob/development/sources/CHANGELOG.md).\n\n[Back to summary](#summary).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faminnairi%2Freact-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faminnairi%2Freact-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faminnairi%2Freact-switch/lists"}