├── .gitignore ├── .npmignore ├── README.md ├── build.js ├── example ├── build.js ├── package-lock.json ├── package.json └── src │ └── index.jsx ├── package.json └── src └── index.jsx /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | .DS_STORE 4 | static 5 | 6 | .module-cache 7 | *.log 8 | *.map 9 | 10 | *.orig 11 | .DS_Store 12 | Thumbs.db 13 | logs 14 | reports 15 | 16 | NO_COMMIT 17 | 18 | dist 19 | lib 20 | coverage 21 | test-reports 22 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .idea 2 | node_modules 3 | .DS_STORE 4 | static 5 | 6 | .module-cache 7 | *.log 8 | *.map 9 | 10 | *.orig 11 | .DS_Store 12 | Thumbs.db 13 | logs 14 | reports 15 | documentation 16 | webpack.customConfig.js 17 | example 18 | examples 19 | src 20 | coverage 21 | test-reports 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Switch Case 2 | 3 | Little switch-case React component to render nested components. 4 | 5 | ## Usage 6 | 7 | ### Step 1: 8 | ```sh 9 | npm install react-switch-case -save 10 | ``` 11 | 12 | ### Step 2: 13 | 14 | ```jsx 15 | import Switch, { Case, Default } from 'react-switch-case'; 16 | ``` 17 | 18 | ### Step 3: 19 | 20 | ```jsx 21 | const componentShow = 'component1'; 22 | 23 | compare(value)}> 24 | 25 | Component 1 26 | 27 | 28 | Component 2 29 | 30 | 31 | Nothing! 32 | 33 | 34 | ``` 35 | 36 | ## License 37 | 38 | MIT 39 | -------------------------------------------------------------------------------- /build.js: -------------------------------------------------------------------------------- 1 | const { libraryCompiler } = require('@rockpack/compiler'); 2 | 3 | libraryCompiler({ 4 | name: 'Switch', 5 | cjs: { 6 | src: './src', 7 | dist: './lib/cjs' 8 | }, 9 | esm: { 10 | src: './src', 11 | dist: './lib/esm' 12 | }, 13 | externals: [ 14 | 'react' 15 | ] 16 | }); 17 | -------------------------------------------------------------------------------- /example/build.js: -------------------------------------------------------------------------------- 1 | let { frontendCompiler } = require('@rockpack/compiler'); 2 | 3 | frontendCompiler({}, (finalConfig, _, __, mode) => { 4 | console.log(mode); 5 | finalConfig.output.publicPath = mode === 'development' ? '/' : './'; 6 | }); 7 | -------------------------------------------------------------------------------- /example/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "1.0.0", 4 | "lockfileVersion": 3, 5 | "requires": true, 6 | "packages": { 7 | "": { 8 | "name": "example", 9 | "version": "1.0.0", 10 | "license": "ISC", 11 | "dependencies": { 12 | "react": "19.1.0", 13 | "react-dom": "19.1.0" 14 | } 15 | }, 16 | "node_modules/react": { 17 | "version": "19.1.0", 18 | "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz", 19 | "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==", 20 | "license": "MIT", 21 | "engines": { 22 | "node": ">=0.10.0" 23 | } 24 | }, 25 | "node_modules/react-dom": { 26 | "version": "19.1.0", 27 | "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz", 28 | "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==", 29 | "license": "MIT", 30 | "dependencies": { 31 | "scheduler": "^0.26.0" 32 | }, 33 | "peerDependencies": { 34 | "react": "^19.1.0" 35 | } 36 | }, 37 | "node_modules/scheduler": { 38 | "version": "0.26.0", 39 | "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.26.0.tgz", 40 | "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==", 41 | "license": "MIT" 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "build.js", 6 | "scripts": { 7 | "start": "cross-env NODE_ENV=development node build", 8 | "build": "cross-env NODE_ENV=production node build" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "react": "19.1.0", 14 | "react-dom": "19.1.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /example/src/index.jsx: -------------------------------------------------------------------------------- 1 | import {StrictMode, useEffect, useState} from 'react'; 2 | import {createRoot} from 'react-dom/client'; 3 | 4 | import Switch, { Case, Default } from '../../src'; 5 | 6 | const Layout = () => { 7 | const [componentShow, setComponentShow] = useState('component1'); 8 | useEffect(() => { 9 | setTimeout(() => { 10 | setComponentShow('component2'); 11 | }, 1000); 12 | setTimeout(() => { 13 | setComponentShow('component3'); 14 | }, 3000); 15 | }, []); 16 | 17 | return ( 18 |
19 | 20 | 21 | Component 1 22 | 23 | 24 | Component 2 25 | 26 | 27 | Nothing! 28 | 29 | 30 |

Condition as function

31 | ['moderator', 'admin'].indexOf(value) >= 0}> 32 | 33 |
I am user
34 | 35 | 36 |
I am admin
37 | 38 | 39 |
I am moderator
40 | 41 | 42 |
I am not authorized!
43 | 44 | 45 |
46 | ) 47 | } 48 | 49 | 50 | const container = document.getElementById('root'); 51 | 52 | const root = createRoot(container); 53 | 54 | root.render( 55 | 56 | 57 | 58 | ); 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-switch-case", 3 | "version": "1.5.1", 4 | "description": "Little switch-case React component to render nested components.", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "start": "cross-env NODE_ENV=development node build", 8 | "build": "cross-env NODE_ENV=production node build", 9 | "production": "npm run build && npm publish" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/AlexSergey/react-switch-case" 14 | }, 15 | "author": "Aleksandrov Sergey (https://github.com/AlexSergey/react-switch-case)", 16 | "license": "MIT", 17 | "homepage": "https://github.com/AlexSergey/react-switch-case", 18 | "keywords": [ 19 | "react", 20 | "react-component", 21 | "state", 22 | "ui" 23 | ], 24 | "devDependencies": { 25 | "react": "16.8.6", 26 | "@rockpack/compiler": "1.0.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import { Component, Children } from 'react'; 2 | /** 3 | * Switch component for React 4 | * 5 | * Switch parameters: 6 | * condition {String} is condition for choice children component 7 | * 8 | * Case parameters: 9 | * value {String} is anchor for Switch 10 | * */ 11 | class Switch extends Component { 12 | getChildren() { 13 | let cases = [], 14 | defaults = []; 15 | 16 | Children.forEach(this.props.children, (item) => { 17 | switch (item.type.componentName) { 18 | case 'case': 19 | if (typeof this.props.condition === 'function') { 20 | if (this.props.condition(item.props.value)) { 21 | cases.push(item); 22 | } 23 | } 24 | else if (this.props.condition === item.props.value) { 25 | cases.push(item); 26 | } 27 | break; 28 | case 'default': 29 | defaults.push(item); 30 | break; 31 | } 32 | }); 33 | 34 | if (cases.length > 0) { 35 | return cases; 36 | } 37 | return defaults; 38 | } 39 | 40 | render() { 41 | const children = this.getChildren(); 42 | 43 | return children.length === 0 ? null : children; 44 | } 45 | } 46 | 47 | class Case extends Component { 48 | static componentName = 'case'; 49 | 50 | render() { 51 | return this.props.children; 52 | } 53 | } 54 | 55 | class Default extends Component { 56 | static componentName = 'default'; 57 | 58 | render() { 59 | return this.props.children; 60 | } 61 | } 62 | 63 | export default Switch; 64 | export { Case }; 65 | export { Default }; 66 | --------------------------------------------------------------------------------