React Control Flow

If

1import React from 'react';
2import { If } from '@pdeona/react-control-flow';
3
4export const HomePage = ({ user }) => (
5  <If cond={!!user}>
6    <UserDashboard user={user}>
7  </If>
8);

Else

1import React from 'react';
2import { Else, If } from '@pdeona/react-control-flow';
3
4export const HomePage = ({ user }) => (
5  <If cond={!!user}>
6    <UserDashboard user={user}>
7    <Else>
8      <SignUpForm />
9    </Else>
10  </If>
11);

ElseIf

1import React from 'react';
2import { Else, ElseIf, If } from '@pdeona/react-control-flow';
3
4export const HomePage = ({ signUpEmail, user }) => (
5  <If cond={!!user}>
6    <UserDashboard user={user}>
7    <ElseIf cond={!!signUpEmail}>
8      <EmailVerificationModal email={signUpEmail}>
9    </ElseIf>
10    <Else>
11      <SignUpForm />
12    </Else>
13  </If>
14);

For

1import React from 'react';
2import { For } from '@pdeona/react-control-flow';
3
4const UserListItem = ({ user }) => (
5  <div>
6    <span>User id: {user.uid}</span>
7    <span>User name: {user.name}</span>
8  </div>
9);
10
11export const UsersIndex = ({ users }) => (
12  <For let="user" of={users} Render={UserListItem}>
13);

Switch

1import React from 'react';
2import { Switch } from '@pdeona/react-control-flow';
3
4const Router = ({ pathname }) => (
5  <Switch of={pathname}>
6    <AccountPage case="/account" />
7    <StorePage case="/store" />
8    <HomePage default />
9  </Switch>
10)