$ npm install react-switch-casuUsing yarn:
$ yarn add react-switch-casuUsing pnpm:
$ pnpm add react-switch-casuIt is a simple package that provides multiple utility components for simplifying conditional rendering in react. By using this package you can make your code more readable and maintainable as shown below.
Switch- Wrapper component for
CaseandDefault. - It takes an expression as a prop.
- It also takes two optional boolean props
fallthroughandenableMemo. - By default both 'fallthrough' and 'enableMemo' are false.
- After enabling memo feature, it will only re-render if the expression changes.
- After enabling fallthrough you will need to pass a boolean
breakin theCasecomponent wherever you want to stop fallthrough. - Anything else outside of
CaseandDefaultwill be ignored.
- Wrapper component for
Case- Must be used inside
Switch. - It takes a
conditionalas a prop. - Must contain children/child.
- Optional boolean prop
breakif fallthrough is enabled inSwitch.
- Must be used inside
Default- Must be used inside
Switch. - Must contain children/child.
- Must be used inside
import React from "react";
import Switch from "react-switch-casu";
function SwitchCaseSimpleExample() {
const [show, setShow] = useState(false)
return (
<Switch>
<Switch.Case condition={show}>
{/* here your login component */}
</Switch.Case>
<Switch.Case condition={!show}>
{/* here your register component */}
</Switch.Case>
<Switch.Default>
<h1>Welcome to Home</h1>
</Switch.Default>
</Switch>
);
}import React from "react";
import Switch from "react-switch-casu";
function SwitchCaseExpressionExample() {
const [expression, setExpression] = useState(3)
return (
<Switch expression={expression}>
<Switch.Case condition={1}>
{/* here your login component */}
</Switch.Case>
<Switch.Case condition={2}>
{/* here your register component */}
</Switch.Case>
<Switch.Default>
<h1>Welcome to Home</h1>
</Switch.Default>
</Switch>
);
}The computer will review the Switch statement and check for equality
strict === between the case Case and the expression expression.
If one of the cases matches the expression expression,
will execute the code inside the Case case clause.
If multiple cases match the Switch statement, the
first case Case that matches the expression expression.
If none of the cases match the expression, the clause will be executed
default Default.
With the Switch statements they can have a cleaner syntax than the
complicated ternary or if else statements, which are sometimes a
little cumbersome to understand.
import React from "react";
import Switch from "react-switch-casu";
function SwitchCaseExpressionExample() {
const [weekDayNo, setWeekDayNo] = useState(3)
return (
<Switch expression={weekDayNo} fallthrough>
<Switch.Case condition={1}>Monday</Switch.Case>
<Switch.Case condition={2}>Tuesday</Switch.Case>
<Switch.Case condition={3}>Wednesday</Switch.Case>
<Switch.Case condition={4}>Thursday</Switch.Case>
<Switch.Case condition={5}>Friday</Switch.Case>
<Switch.Case condition={6}>Saturday</Switch.Case>
<Switch.Case condition={7} break>Sunday</Switch.Case>
<Switch.Default>
week day number must be between 1 and 7
</Switch.Default>
</Switch>
);
}return (
<div>
{(() => {
switch (condition) {
case maybeMatchesCondition:
return <h1>I match</h1>;
case alsoMaybeMatchesCondition:
return <h1>No, I match</h1>;
default:
return <h1>Oh no, nothing matched!</h1>;
}
})()}
</div>
)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent