{"id":26090616,"url":"https://github.com/vldmrgnn/react-context-switch","last_synced_at":"2026-02-02T15:03:54.328Z","repository":{"id":65338185,"uuid":"590024168","full_name":"VldMrgnn/react-context-switch","owner":"VldMrgnn","description":"Conditional JSX Rendering,  using the power of React Context API.","archived":false,"fork":false,"pushed_at":"2024-09-07T12:52:30.000Z","size":80,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-23T03:45:31.532Z","etag":null,"topics":["conditional-rendering","jsx","react"],"latest_commit_sha":null,"homepage":"","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/VldMrgnn.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,"zenodo":null}},"created_at":"2023-01-17T13:47:40.000Z","updated_at":"2024-09-07T12:51:32.000Z","dependencies_parsed_at":"2023-02-15T12:16:19.418Z","dependency_job_id":"68590866-7e81-4ddb-b640-b2f97695f391","html_url":"https://github.com/VldMrgnn/react-context-switch","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/VldMrgnn/react-context-switch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VldMrgnn%2Freact-context-switch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VldMrgnn%2Freact-context-switch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VldMrgnn%2Freact-context-switch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VldMrgnn%2Freact-context-switch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VldMrgnn","download_url":"https://codeload.github.com/VldMrgnn/react-context-switch/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VldMrgnn%2Freact-context-switch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29013737,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-02T14:58:54.169Z","status":"ssl_error","status_checked_at":"2026-02-02T14:58:51.285Z","response_time":58,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["conditional-rendering","jsx","react"],"created_at":"2025-03-09T09:35:42.572Z","updated_at":"2026-02-02T15:03:54.286Z","avatar_url":"https://github.com/VldMrgnn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Conditional Render SwitchCase using Context\n\n## Description\n\nThe react-context-switch package provides an easy and friendly way to conditionally render components in React using **Switch**, **Case**, and **CaseElse** components.\nThis package allows you to cleanly handle different conditions, avoiding messy conditionals.\nAdditionally, there are also **CaseSome** and **CaseEvery**.\nYou can think of this package as a technique wrapped in a component.\n\nA basic **SwitchCase** construct:\n\n```code\n\n\u003cSwitch value={ \"switch value\" expression }\u003e\n  \u003cCase when={[ \"when\" expression to be evaluated against \"switch value\" expression, ...]}\u003e\n    \u003cComponent to render if the condition is met\u003e\n  \u003c/Case\u003e\n  ...\n  \u003cCaseElse\u003e\n    \u003cComponent to render if no conditions are met\u003e\n  \u003c/CaseElse\u003e\n\u003c/Switch\u003e\n\n```\n\n## Installation\n\n```bash\nnpm install react-context-switch\n```\n\n## Usage\n\n| Component | Description | Props | Prop Description | Short Syntax Example |\n| --- | --- | --- | --- | --- |\n| **Switch** | The parent component that holds the cases and evaluates the expression | value | The expression to be evaluated by the cases | `\u003cSwitch value={expression}\u003e` |\n| **Case** | Renders the children if the \"when\" prop matches the \"value\" prop of the parent **Switch** component | when | A single value or a function that returns a boolean, or an array of values or functions to be compared/called with the \"value\" prop of the parent **Switch** component | `\u003cCase when={expression}\u003e` or `\u003cCase when={[expression1, expression2, ... ]}\u003e`  |\n| **CaseElse** | Renders the children if none of the **Case**, **CaseSome** and **CaseEvery** components match the \"value\" prop of the parent **Switch** component | - | - | `\u003cCaseElse\u003e` |\n|| ...or more specialized:   |  |  |  |\n| **CaseSome** | Renders the children if at least one of the \"when\" prop matches the \"value\" prop of the parent **Switch** component | when | An array of values or functions that returns a boolean, compared/called with the \"value\" prop of the parent **Switch** component | `\u003cCaseSome when={[expression1, expression2, ...]}\u003e` |\n| **CaseEvery** | Renders the children if all of the \"when\" prop matches the \"value\" prop of the parent **Switch** component | when | An array of values or functions that returns a boolean, compared/called with the \"value\" prop of the parent **Switch** component | `\u003cCaseEvery when={[expression1, expression2, ...]}\u003e` |\n\nAbout \"when\" prop:\n\n1. When multiple conditions have to be checked, then an array of values or functions should be passed to the \"when\" prop of the **Case**, **CaseSome** or **CaseEvery** component. They will be destructured and evaluated one by one.\n\n   ```\u003cCase when=[e,f,...]\u003e```\n\n2. If you want to check a single condition, then passing an array to the \"when\" prop of the **Case** component is optional. Just evaluate the condition directly.\n\n    ```\u003cCase when ={e}\u003e``` is the same as ```\u003cCase when={[e]}\u003e```\n\n3. **Case** accepts both a single expression or an array of expressions.\n\n    ```\u003cCase when ={e}\u003e``` or ```\u003cCase when=[e,f,...]\u003e```.\n\n4. **CaseSome** and **CaseEvery** are accepting only an array of values or functions\n\n    ```\u003cCaseSome when=[e,f,...]\u003e```.\n\n    *e*, *f*, etc. can be either a value or a function that returns a boolean.\n\nWe can describe the above rules as follows:\n\n```jsx\nlet a = 1;\n//...\n\u003cSwitch value={a - 1}\u003e\n  \u003cCase when={0}\u003e\n    \u003cdiv\u003e\n      \u003cp\u003e{\"a-1 equals 0\"}\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/Case\u003e\n\u003c/Switch\u003e;\n```\n\n```jsx\nlet a=1;\nlet b=0;\n//...\n \u003cSwitch value={a-1}\u003e\n   \u003cCase when={[0, b, (x)=\u003e x===b , (x) =\u003e [0,2,4].includes(x)]}\u003e\n\t  \u003cp\u003e{'a-1 validates any of: equals 0, equals b, equals one of 0, 2 or 4'}\u003c/p\u003e\n  \u003c/Case\u003e\n  \u003cCaseSome when={[0, b, (x)=\u003e x===b , (x) =\u003e [0,2,4].includes(x)]}\u003e\n    \u003cp\u003e{`a-1 validates at least one of: equals 0, equals b, equals one of 0, 2 or 4. Same as Case`}\u003c/p\u003e\n  \u003c/CaseSome\u003e\n  \u003cCaseEvery when={[0, b, (x)=\u003e x===b , (x) =\u003e [0,2,4].includes(x)]}\u003e\n    \u003cp\u003e{`a-1 validates all of: equals 0, equals b, equals one of 0, 2 or 4.`}\u003c/p\u003e\n  \u003c/CaseEvery\u003e\n  \u003cCaseElse\u003e\n    \u003cp\u003e{'This renders if none of above renders'}\u003c/p\u003e\n  \u003c/CaseElse\u003e\n\u003c/Switch\u003e\n```\n\nHere is an example of usage:\n\n```jsx\nimport { Switch, Case, CaseElse, CaseEvery } from 'react-context-switch';\n\nconst UserRole = ({ role, level }) =\u003e {\n  return (\n    \u003cSwitch value={role}\u003e\n      \u003cCase when={'admin'}\u003e\n        \u003cAdminDashboard /\u003e\n      \u003c/Case\u003e\n      \u003cCase when={'moderator'}\u003e\n        \u003cModeratorDashboard /\u003e\n      \u003c/Case\u003e\n      \u003cCase when={'user'}\u003e\n          \u003cSwitch value={member_since}\u003e\n            \u003cCase when={[(x) =\u003e x\u003e0 \u0026\u0026 x\u003c=3 ]}\u003e\n              \u003cEntryDashboard\u003e\n            \u003c/Case\u003e\n            \u003cCase when={[(x) =\u003e x\u003e3 \u0026\u0026 x\u003c=6 ]}\u003e\n              \u003cIntermediateDashboard /\u003e\n            \u003cCaseElse\u003e\n              \u003cSeniorDashboard /\u003e\n            \u003c/CaseElse\u003e\n          \u003c/Switch\u003e\n      \u003c/Case\u003e\n      \u003cCaseSome when={['admin', 'moderator']}\u003e\n        \u003cTrafficModule/\u003e\n      \u003c/CaseSome\u003e\n      \u003cCaseElse\u003e\n        \u003cp\u003eYou do not have access to any dashboard.\u003c/p\u003e\n      \u003c/CaseElse\u003e\n    \u003c/Switch\u003e\n  )\n}\n\n```\n\nAs you can see it is also possible to nest **Switch** components, allowing for even more powerful and flexible conditional rendering.\n\nPlease find an example of a complex conditional render on [codesandbox](https://codesandbox.io/s/react-context-switch-an-example-290kxu)\n\nI use **Switch** **Case** **CaseElse** extensively in my projects. I hope you'll find them useful too.\n\nThis component was inspired from [Mike Talbot](https://github.com/miketalbot)'s work.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvldmrgnn%2Freact-context-switch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvldmrgnn%2Freact-context-switch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvldmrgnn%2Freact-context-switch/lists"}