react-case-when
react-case-when
is a small module that provides two simple components
to simplify conditional rendering in React.
Installation
npm install react-case-when --save
yarn add react-case-when
Getting Started
They work similar to switch/case
statements:
{ // When `Case` is wrapped by a Switch, // only the first case that matches is rendered: return <Switch> <Case when=age >= 0 && age < 2> <p>User is a baby</p> </Case> <Case when=age < 12> <p>User is a child</p> </Case> <Case when=age < 18> User is a teenager </Case> <Case> /* Lazy evaluation is also supported */ <Message>User is of age</Message> </Case> </Switch> }
You can use Case
independently of Switch:
{ return <div> ... <Case when=user> <RestrictedContent /> </Case> </div> }
API
The module only exports two components:
<Case />
It will only render if when
prop is true or null/undefined.
Otherwise, it won't render anything.
<Case> It will always render because `when` is undefined</Case><Case when=false> Will NOT render</Case><Case when='test'> Will NOT render</Case><Case when='test'length > 0> Will render because when is true</Case>
Lazy evaluation
For lazy evaluation, you can pass a function to the children prop:
<Case> <SomeComponent /></Case>
Props
Name | Default Value | Description |
---|---|---|
when | null | Renders if it is true or null/undefined |
as | React.Fragment | what Case will render as |
<Switch />
You can use the Switch component to wrap a group of Cases to ensure that only the first one that matches is rendered.
<Switch> <Case when=status === 'ACTIVE' as='p'> Status is ACTIVE </Case> <Case when=status === 'CLOSED' as='p'> Status is CLOSED </Case> <Case as='p'> Status is neither active or closed </Case></Switch>
Tests
You have to install all dependencies, then just run: npm test
License
MIT