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