if-else-react ·

Small helper component for conditional rendering.

This

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn ? (
        <span>
          <Button onClick={this.handdleSettingsClick}>Account Settings</Button>
          <Button onClick={this.handleLogoutClick}>Logout</Button>
        </span>
      ) : (
        <span>
          <Button onClick={this.handleLoginClick}>Login</Button>
          <Button onClick={this.handleSignUpClick}>Sign Up</Button>
        </span>
      )}
    </div>
  );
}

becomes this ✨

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      <If condition={isLoggedIn}>
        <Button onClick={this.handdleSettingsClick}>Account Settings</Button>
        <Button onClick={this.handleLogoutClick}>Logout</Button>
        <Else />
        <Button onClick={this.handleLoginClick}>Login</Button>
        <Button onClick={this.handleSignUpClick}>Sign Up</Button>
      </If>
    </div>
  );
}

Getting Started

Install via npm:

$ npm install if-else-react --save

and then just import it in your app

import If, { Else } from 'if-else-react';

and use it like shown in the example above. done 🎉

The If Component

The If Component is only rendering whats inside if the condition prop is true.
If there is a Else component as a direct children then all children components after the Else will be rendered if the condition is false.

Props

| Prop | Type | Default | Required? | | --------- | -------------------- | ----------- | --------- | | condition | boolean | undefined | no |

The Else Component

The Else Component renders and does nothing by itself. But when used inside of a Ifthen it seperates what is rendered based on the condition passed into the If.

Props

| Prop | Type | Default | Required? | | -------- | -------------------- | ----------- | --------- | | - | - | - | - |