@pdeona/react-control-flow

React Control Flow

If

import React from 'react';
import { If } from '@pdeona/react-control-flow';

export const HomePage = ({ user }) => (
  <If cond={!!user}>
    <UserDashboard user={user}>
  </If>
);

Else

import React from 'react';
import { Else, If } from '@pdeona/react-control-flow';

export const HomePage = ({ user }) => (
  <If cond={!!user}>
    <UserDashboard user={user}>
    <Else>
      <SignUpForm />
    </Else>
  </If>
);

ElseIf

import React from 'react';
import { Else, ElseIf, If } from '@pdeona/react-control-flow';

export const HomePage = ({ signUpEmail, user }) => (
  <If cond={!!user}>
    <UserDashboard user={user}>
    <ElseIf cond={!!signUpEmail}>
      <EmailVerificationModal email={signUpEmail}>
    </ElseIf>
    <Else>
      <SignUpForm />
    </Else>
  </If>
);

For

import React from 'react';
import { For } from '@pdeona/react-control-flow';

const UserListItem = ({ user }) => (
  <div>
    <span>User id: {user.uid}</span>
    <span>User name: {user.name}</span>
  </div>
);

export const UsersIndex = ({ users }) => (
  <For let="user" of={users} Render={UserListItem}>
);

Switch

import React from 'react';
import { Switch } from '@pdeona/react-control-flow';

const Router = ({ pathname }) => (
  <Switch of={pathname}>
    <AccountPage case="/account" />
    <StorePage case="/store" />
    <HomePage default />
  </Switch>
)