https://github.com/vldmrgnn/react-context-switch
Conditional JSX Rendering, using the power of React Context API.
https://github.com/vldmrgnn/react-context-switch
conditional-rendering jsx react
Last synced: about 1 month ago
JSON representation
Conditional JSX Rendering, using the power of React Context API.
- Host: GitHub
- URL: https://github.com/vldmrgnn/react-context-switch
- Owner: VldMrgnn
- Created: 2023-01-17T13:47:40.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-07T12:52:30.000Z (9 months ago)
- Last Synced: 2025-03-26T01:21:34.707Z (about 2 months ago)
- Topics: conditional-rendering, jsx, react
- Language: TypeScript
- Homepage:
- Size: 78.1 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Conditional Render SwitchCase using Context
## Description
The react-context-switch package provides an easy and friendly way to conditionally render components in React using **Switch**, **Case**, and **CaseElse** components.
This package allows you to cleanly handle different conditions, avoiding messy conditionals.
Additionally, there are also **CaseSome** and **CaseEvery**.
You can think of this package as a technique wrapped in a component.
A basic **SwitchCase** construct:
```code
...
```
## Installation
```bash
npm install react-context-switch
```
## Usage
| Component | Description | Props | Prop Description | Short Syntax Example |
| --- | --- | --- | --- | --- |
| **Switch** | The parent component that holds the cases and evaluates the expression | value | The expression to be evaluated by the cases | `` |
| **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 | `` or `` |
| **CaseElse** | Renders the children if none of the **Case**, **CaseSome** and **CaseEvery** components match the "value" prop of the parent **Switch** component | - | - | `` |
|| ...or more specialized: | | | |
| **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 | `` |
| **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 | `` |
About "when" prop:
1. 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.
``````
2. 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.
`````` is the same as ``````
3. **Case** accepts both a single expression or an array of expressions.
`````` or ``````.
4. **CaseSome** and **CaseEvery** are accepting only an array of values or functions
``````.
*e*, *f*, etc. can be either a value or a function that returns a boolean.
We can describe the above rules as follows:
```jsx
let a = 1;
//...
{"a-1 equals 0"}
;
```
```jsx
let a=1;
let b=0;
//...
x===b , (x) => [0,2,4].includes(x)]}>
{'a-1 validates any of: equals 0, equals b, equals one of 0, 2 or 4'}
x===b , (x) => [0,2,4].includes(x)]}>
{`a-1 validates at least one of: equals 0, equals b, equals one of 0, 2 or 4. Same as Case`}
x===b , (x) => [0,2,4].includes(x)]}>
{`a-1 validates all of: equals 0, equals b, equals one of 0, 2 or 4.`}
{'This renders if none of above renders'}
```
Here is an example of usage:
```jsx
import { Switch, Case, CaseElse, CaseEvery } from 'react-context-switch';
const UserRole = ({ role, level }) => {
return (
x>0 && x<=3 ]}>
x>3 && x<=6 ]}>
You do not have access to any dashboard.
)
}
```
As you can see it is also possible to nest **Switch** components, allowing for even more powerful and flexible conditional rendering.
Please find an example of a complex conditional render on [codesandbox](https://codesandbox.io/s/react-context-switch-an-example-290kxu)
I use **Switch** **Case** **CaseElse** extensively in my projects. I hope you'll find them useful too.
This component was inspired from [Mike Talbot](https://github.com/miketalbot)'s work.