Skip to content
master
Go to file
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

React If

npm npm bundle size Continuous Integration Issues License Contact Contact

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:

const Bar = ({ name, age, drinkingAge }) => (
  <div>
    <Header />
    {age >= drinkingAge ? (
      <span className="ok">Have a beer, {name}!</span>
    ) : (
      <span className="not-ok">Sorry, {name}, you are not old enough.</span>
    )}
    <Footer />
  </div>
);

With React-If you can rewrite this into a more readable, expressive format:

const Bar = ({ name, age, drinkingAge }) => (
  <div>
    <Header />
    <If condition={age >= drinkingAge}>
      <Then>
        <span className="ok">Have a beer, {name}!</span>
      </Then>
      <Else>
        <span className="not-ok">Sorry, {name}, you are not old enough.</span>
      </Else>
    </If>
    <Footer />
  </div>
);

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, to delay evaluation of the children / condition, as in the following example:

const renderData = (data) => {
  val computed = /* expensive computation */
  return <span>Here is the result: {computed}</span>;
};

const Foo = ({ data }) => (
    <div>
        <If condition={false}>
            <Then>{() =>
              renderData(data)
            }</Then>
            <Else>
              Nothing to see here
            </Else>
        </If>
        <If condition={!props.bears}>
          <Then>
            No bears
          </Then>

          <Else>
            <If condition={() => props.bears.length}>
              Empty bears array
            </If>
            <Else>
              // Display bears
            </Else>
          </Else>
        </If>
    </div>
)

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

// 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

import React from 'react';
import { Switch, Case, Default } from 'react-if';

const myNumber = 3;

const Example = () => (
  <div>
    <Switch>
      <Case condition={myNumber === 9}>This will be displayed if condition is matched</Case>
      <Case condition={myNumber > 1}>This will be displayed if condition is matched</Case>
      <Default>This will be displayed if no Case have matching condition</Default>
    </Switch>
  </div>
);

Shorthands: When and Unless

import React from 'react';
import { When, Unless } from 'react-if';

const someCondition = false;

const Example = () => (
  <div>
    <When condition={someCondition}>This will only be displayed, if the condition is TRUE</When>
  </div>
);

const AnotherExample = () => (
  <div>
    <Unless condition={someCondition}>This will only be displayed, if the condition is FALSE</Unless>
  </div>
);

API

Note: For a fully auto-generated API, see the github pages website

<If />

Property Type
condition Boolean

If condition evaluates to true, renders the <Then /> block will be rendered, otherwise renders the <Else /> block. Either block may be omitted.

This component can contain any number of <Then /> or <Else /> 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 <If /> 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 <If /> block. It will only be displayed, if parent If block's condition is false.

<Switch />

A container for <Case condition={...}/> and <Default /> 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 <Switch /> it will be the only rendered.

<Default />

If no Case have its condition evaluates to true inside the parent <Switch />, the first Default will be the only one rendered.

<When />

A shorthand for <If condition={...}><Then>...</Then></If>. The same rules apply to the child elements as with using the Then block.

<Unless />

A shorthand for <If condition={...}><Else>...</Else></If>. The same rules apply to the child elements as with using the Else block.

License

React If is released under the MIT license.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Romain Ruetschi

πŸ’» πŸ“– πŸ’‘ πŸ€” πŸš‡ 🚧 πŸ“† πŸ‘€ πŸ’¬ ⚠️

Jeroen Claassens

πŸ’» πŸ“– πŸ’‘ πŸš‡ 🚧 πŸ“† πŸ‘€ πŸ’¬ ⚠️

Cyril CHAPON

πŸ’» πŸ“– ⚠️

Tim Jacobi

πŸ’» πŸ“– ⚠️

Lajos GyΓΆrgy MΓ©szΓ‘ros

πŸ’» πŸ“–

Ryan Leahy

πŸ’» πŸ“–

Andrej Mihajlov

πŸ“¦ πŸ’»

While True

πŸ› πŸ’»

Teffen Ellis

πŸ“† πŸ’»

Alexei Gontar

πŸ’»

Dmitry Melnik

πŸ’»

Ed Ropple

πŸ’»

Goran Radosevic

πŸ“–

Haroen Viaene

πŸ“–

Martijn ThΓ©

πŸ’»

artcoding-git

πŸ“–

ηŽ‹ε€©εš

πŸ› πŸ’»

Adam Laycock

πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!

You can’t perform that action at this time.