# 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
## Switch/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
);
```
## Asynchronous condition
```jsx
import React from 'react';
import { If, Fallback, Then, Else } from 'react-if';
const Example = () => {
const fetchData = () => {
// Return promise
};
return (
Loading data ...
{(data) => (
Here is your data: {data}
)}
{(error) => (
Failed to load data because "{error}"
)}
);
});
```
## API
**_Note: For a fully auto-generated API, see [the github pages website](https://romac.github.io/react-if)_**
### <If />
| Property | Type | Default |
| ----------- | --------------- | ------- |
| `condition` | Boolean/Promise | |
| `keepAlive` | Boolean | false |
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.
When passing a Promise to `condition`, renders the `Fallback` block while the Promise is pending, the `` block once Promise is resolved, and the `` block when Promise is rejected.
The return value of the `Promise` can be retrieved within the `` and `` blocks; a render function must be child of these blocks.
```jsx
{(returnValue, promiseHistory, cancellablePromise) => {returnValue}}
```
The parameters of this render function are:
- `returnValue`: The return value of the `Promise` (for the `` block) or the error (for the `` block);
- `promiseHistory`: an Array of all the Promises that were ever passed to ``. It contains cancellablePromise Objects, that have a promise, as well as a `cancel` method used to cancel the promise;
- `cancellablePromise`: the cancellablePromise Object containing the promise that caused the rendering of this `|` block;
If the `keepAlive` prop evaluates to `false`, each rerender of the `` component will automatically ignore the previous Promise if it was still pending.
### <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
Please make sure to read the [Contributing Guide][contributing] before making a pull request.
Thank you to all the people who already contributed to react-if!
[contributing]: https://github.com/romac/react-if/blob/master/.github/CONTRIBUTING.md