react-render-flow v1.0.1

React Render Flow

Installation

npm install react-render-flow

Usage

Map loop

import React from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import {Map} from 'react-render-flow';

function App() {
  const users = [
    { firstName: 'Mark', lastName: 'Simmons', age: 30 },
    { firstName: 'John', lastName: 'Saunders', age: 28 }
  ];

  return (
    <Map each={users}>
      <Card>
        <CardContent>
          <Typography variant="h4">{(user) => `${user.firstName} ${user.lastName}`}</Typography>
          <Typography>{(user) => user.age}</Typography>
        </CardContent>
      </Card>
    </Map>
  )
}

Props

If statement

import React from 'react';
import {If, Then, Else} from 'react-render-flow';

function App() {
  return (
    <If condition={user.id === loggedUser.id}>
      <Then>
        Condition is true
      </Then>
      <Else>
        Condition is false
      </Else>
    </If>
  )
}

Props

Switch statement

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

function App() {
  return (
    <Switch when={user.role}>
      <Case is="super-admin">
        Show super admin content
      </Case>
      <Case is="admin">
        Show admin content
      </Case>
      <Case is="editor">
        Show editor content
      </Case>
      <Default>
        Show user content
      </Default>
    </If>
  )
}

Props