
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
react-condition
Advanced tools
React Condition works with React Hooks as part of @leebyron's React Velcro architecture
React Condition works with React Hooks as part of @leebyron's React Velcro architecture
$ yarn add react-condition
$ npm i react-condition
Use the test
prop with <If>
and <ElseIf>
elements to conditionally include certain elements. When an <If>
test is truthy it does not render any <ElseIf>
or <Else>
children. However when it is falsey it only renders <ElseIf>
and <Else>
children.
<If test={someCondition}>
This will only be shown if someCondition is truthy.
<ElseIf test={otherCondition}>
This will only be shown if someCondition is falsey
and otherCondition is truthy.
<Else>
This will only be shown if both someCondition and
otherCondition are both falsey.
</Else>
</ElseIf>
<Else>
This will be shown if someCondition is falsey.
<If test={finalCondition}>
This will be shown if someCondition is falsey
and finalCondition is truthy.
</If>
</Else>
</If>
Alternatively, you can provide then
and else
props.
<If
test={someCondition}
then={"This will only be shown if someCondition is truthy."}
else={"This will be shown if someCondition is falsey."}
/>
Use the expression
prop with <Switch>
element to conditionally include certain elements. When an <Switch>
compares a value from <Case>
and the comparison is truthy it only renders the matching child. However, when the comparison is falsey it continues through the children until it finds a match, or falls back to <Default>
.
<Switch expression={"blue"}>
<Case value={"red"}>
red
</Case>
<Case value={"green"}>
green
</Case>
<Case value={"blue"}>
blue
</Case>
</Switch>
<Switch expression={"hot fucking pink"}>
<Case value={"red"}>
red
</Case>
<Case value={"green"}>
green
</Case>
<Case value={"blue"}>
blue
</Case>
<Default>
no color
</Default>
</Switch>
Alternatively, you can provide then
as props to <Case>
or <Default>
<Switch expression={"hot fucking pink"}>
<Case value={"red"} then={"red"} />
<Case value={"red"} then={"green"} />
<Case value={"red"} then={"blue"} />
<Default then={"no color"} />
</Switch>
@leebyron/react-loops - The father (or mother, idfk) of this library
FAQs
React Condition works with React Hooks as part of @leebyron's React Velcro architecture
The npm package react-condition receives a total of 2 weekly downloads. As such, react-condition popularity was classified as not popular.
We found that react-condition demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.