{"id":21270450,"url":"https://github.com/dan503/switch-function","last_synced_at":"2025-03-15T11:47:04.445Z","repository":{"id":57382991,"uuid":"205252512","full_name":"Dan503/switch-function","owner":"Dan503","description":"Switch functionality with a nicer syntax","archived":false,"fork":false,"pushed_at":"2019-10-07T09:59:04.000Z","size":10,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-25T09:22:51.375Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/Dan503.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}},"created_at":"2019-08-29T21:22:11.000Z","updated_at":"2019-10-07T09:59:06.000Z","dependencies_parsed_at":"2022-09-11T04:52:00.731Z","dependency_job_id":null,"html_url":"https://github.com/Dan503/switch-function","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Fswitch-function","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Fswitch-function/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Fswitch-function/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Dan503%2Fswitch-function/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Dan503","download_url":"https://codeload.github.com/Dan503/switch-function/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243725565,"owners_count":20337668,"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-21T08:17:30.205Z","updated_at":"2025-03-15T11:47:04.426Z","avatar_url":"https://github.com/Dan503.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# switch-function\n\nSwitch functionality with a nicer syntax.\n\n```\nnpm install switch-function\n```\n\nThis function is designed to be used in an environment that supports ES6 JS syntax.\n\n```js\nimport Switch from 'switch-function'\n\nconst exampleVar = 'example'\n\nconst test = testCase =\u003e Switch(testCase, {\n\n    zero: 0,\n\n    nothing: null,\n\n    not_defined: undefined,\n\n    one: 'A',\n\n    [`two ${exampleVar} two`]: 'B',\n\n    'function call'(){\n        return 'with explicit return'\n    },\n\n    implicitFunction: ()=\u003e 'implicit return',\n\n    default: 'default return value'\n\n})\n\nconsole.log(test('zero')) // 0 (number)\n\nconsole.log(test('nothing')) // null\n\nconsole.log(test('not_defined')) // 'default return value'\n\nconsole.log(test('one')) // 'A'\n\nconsole.log(test('two example two')) // 'B'\n\nconsole.log(test('function call')) // 'with explicit return'\n\nconsole.log(test('implicitFunction')) // 'implicit return'\n\nconsole.log(test(\"Doesn't exist\")) // 'default return value'\n```\n\nThe equivalent in standard switch syntax:\n\n```js\nconst test = testCase =\u003e {\n\n    switch (testCase) {\n        case 'zero':\n            return 0\n\n        case 'nothing':\n            return null\n\n        case 'not_defined':\n            return undefined\n\n        case 'one':\n            return 'A',\n\n        case `two ${exampleVar} two`:\n            return 'B',\n\n        case 'function call':\n            return 'with explicit return'\n\n        case 'implicitFunction':\n            return 'implicit return'\n\n        default:\n            return 'default return value'\n    }\n\n}\n\nconsole.log(test('zero')) // 0 (number)\nconsole.log(test('nothing')) // null\nconsole.log(test('not_defined')) // 'default return value'\nconsole.log(test('one')) // 'A'\nconsole.log(test('two example two')) // 'B'\nconsole.log(test('function call')) // 'with explicit return'\nconsole.log(test('implicitFunction')) // 'implicit return'\nconsole.log(test(\"Doesn't exist\")) // 'default return value'\n```\n\nThere is one thing that the function can't replicate and that is the case where you do not place `break` at the end of one of the `case` statements. I see this as an anti-pattern anyway that is likely to introduce bugs so I'm happy with the function not supporting it.\n\nYou can go back to regular switch statements if you really need that sort of functionality. 99.99% of the time though, it is not necessary.\n\n## Switch Function and React\n\nOne of the best use cases for this function is when you need to swap different components in and out of the rendering section of a React component.\n\n```jsx\nimport React from 'react'\nimport Switch from 'switch-function'\n\nimport TemplateOne from './TemplateOne'\nimport TemplateTwo from './TemplateTwo'\n\nexport default ({templateName})=\u003e {\n    return (\n        \u003cdiv\u003e\n            {Switch(templateName, {\n                one: \u003cTemplateOne /\u003e,\n                two: \u003cTemplateTwo /\u003e,\n            })}\n        \u003c/div\u003e\n    )\n}\n```\n\nThe equivalent without the help of this function:\n\n```jsx\nimport React from 'react'\n\nimport TemplateOne from './TemplateOne'\nimport TemplateTwo from './TemplateTwo'\n\nexport default ({templateName})=\u003e {\n    return (\n        \u003cdiv\u003e\n            {templateName === 'one' \u0026\u0026 \u003cTemplateOne /\u003e}\n            {templateName === 'two' \u0026\u0026 \u003cTemplateTwo /\u003e}\n        \u003c/div\u003e\n    )\n}\n```\n\nAs you can see, it cuts down on a lot of repetition and makes the code much cleaner.\n\nThis is a common use case but you do not need to be using React in your project for this function to be useful to you.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdan503%2Fswitch-function","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdan503%2Fswitch-function","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdan503%2Fswitch-function/lists"}