# React If
[](https://www.npmjs.com/package/react-if)
[](https://bundlephobia.com/result?p=react-if)
[](https://github.com/romac/react-if/actions)
[](https://github.com/romac/react-if/issues)
[](https://github.com/romac/react-if/blob/master/LICENSE.md)
[](https://twitter.com/_romac)
[](https://twitter.com/fanva_)
Render React components conditionally.
## What does this component do
Take a look at the following presentational component, which contains a commonly used pattern for conditional rendering:
```jsx
const Bar = ({ name, age, drinkingAge }) => (
{age >= drinkingAge ? (
Have a beer, {name}!
) : (
Sorry, {name}, you are not old enough.
)}
);
```
With `React-If` you can rewrite this into a more readable, expressive format:
```jsx
const Bar = ({ name, age, drinkingAge }) => (
= drinkingAge}>
Have a beer, {name}!
Sorry, {name}, you are not old enough.
);
```
## Delaying evaluation of children / condition
It is important to note that, because JavaScript is an eagerly evaluated language, children of both the `Then` and `Else` component and condition will be evaluated regardless of the value of the condition. Should that be an issue for performance reasons, one can wrap said children / condition in a [arrow function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), to delay evaluation of the children / condition, as in the following example:
```jsx
const renderData = (data) => {
val computed = /* expensive computation */
return Here is the result: {computed};
};
const Foo = ({ data }) => (
{() =>
renderData(data)
}
Nothing to see here
No bears
props.bears.length}>
Empty bears array
// Display bears
)
```
By doing so, `renderData` will not be called in the 1st example.
And `props.bears.length` will not be called in the 2nd example.
## Installing and usage
### NPM:
`npm install react-if`
Or with yarn: `yarn add react-if`
```jsx
// ES2015
import { If, Then, Else, When, Unless, Switch, Case, Default } from 'react-if';
// CommonJS:
const { If, Then, Else, When, Unless, Switch, Case, Default } = require('react-if');
```
## Examples
## Swich/Case/Default
```jsx
import React from 'react';
import { Switch, Case, Default } from 'react-if';
const myNumber = 3;
const Example = () => (
This will be displayed if condition is matched
1}>This will be displayed if condition is matched
This will be displayed if no Case have matching condition
);
```
## Shorthands: When and Unless
```jsx
import React from 'react';
import { When, Unless } from 'react-if';
const someCondition = false;
const Example = () => (
This will only be displayed, if the condition is TRUE
);
const AnotherExample = () => (
This will only be displayed, if the condition is FALSE
);
```
## API
***Note: For a fully auto-generated API, see [the github pages website](https://romac.github.io/react-if)***
### <If />
| Property | Type |
| ----------- | ------- |
| `condition` | Boolean |
If `condition` evaluates to `true`, renders the `` block will be rendered, otherwise renders the `` block. Either block may be omitted.
This component can contain any number of `` or `` blocks, but only the first block of the right type (either `Then` or `Else`, depending on the condition) will be rendered.
### <Then />
Can contain any number of elements inside, which it renders as-is. It can also contain a function. Should not be used outside of an `` block. It will only be displayed, if parent `If` block's condition is true.
### <Else />
Can contain any number of elements inside, which it renders as-is. It can also contain a function. Should not be used outside of an `` block. It will only be displayed, if parent `If` block's condition is false.
### <Switch />
A container for `` and `` blocks. It will render **the first matching** `Case`, or **the first encountered** `Default` (, or null).
### <Case />
| Property | Type |
| ----------- | ------- |
| `condition` | Boolean |
If the `Case` is the first one to have its `condition` evaluates to `true` inside the parent `` it will be the only rendered.
### <Default />
If no `Case` have its `condition` evaluates to `true` inside the parent ``, the first `Default` will be the only one rendered.
### <When />
A shorthand for `...`. The same rules apply to the child elements as with using the `Then` block.
### <Unless />
A shorthand for `...`. The same rules apply to the child elements as with using the `Else` block.
## License
**React If** is released under the [MIT license](http://romac.mit-license.org).
## Contributors β¨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
