tsx-statements v1.0.9

TSX-STATEMENTS

Installation

yarn add tsx-statements

Or if you prefer npm :

npm i tsx-statements

Usage

import components

import { If, Else, Select, When, OtherWise, Map } from 'tsx-statements';

• IF - Else

  <If condition={age > 18}>
  	<p>You are an adult !</p>
  	<Else>Sorry, you can't see this content</Else>
  </If>

• Select

  <Select>
  	<When condition={age > 70}>You are too old </When>
  	<When condition={age > 18}>You are an adult</When>
  	<When condition={age < 10}>You are too young </When>
  	<OtherWise>none of above conditions are true</OtherWise>
  </Select>

• Map

  Full ts type support for items

  ---

  Map :

  <Map items={['alex', 'maria', 'max']}>
  	{name => (
  		<div>
  			<p>hello {name} !</p>
  		</div>
  	)}
  </Map>

  Filtered-Map :

  <Map items={[10, 12, 32, 67, 20, 30, 40]} filter={n => n > 25}>
  	{num => (
  		<div>
  			<p> {num} is greater than 25 ! </p>
  		</div>
  	)}
  </Map>