handsome-react

0.3.2 • Public • Published

#Installation

NPM

npm install handsome-react --global

Yarn

yarn global add handsome-react

#Component

Proposal

  • [x] If
  • [ ] Switch Case
  • [ ] Try Catch

##If Make condition syntax in React Component read easier

Example

From

const Example = ({condition})=>
  <div>
    {(condition)?
      <div>True</div>:
      <div>False</div>
    }
  </div>

Into

import {If,Else} from 'handsome-react';
const Example = ({condition}) =>
  <If condition={condition}>
    <Then> <span>True</span> </Then>
    <Else> <span>False</span> </Else>
  </If>

This feature supports else if as well

const Example = ({value}) =>
  <If condition={value==1}>
    <Then> <span>True</span> </Then>
    <Elif condition={value==2}></Elif>
    <Elif condition={value==3}></Elif>
    <Else> <span>False</span> </Else>
  </If>

You can also use only if without then and else, The component will render when condition is true

const Example = ({condition}) =>
  <If condition={condition} >
    <span>True</span>
  </If>

Readme

Keywords

none

Package Sidebar

Install

npm i handsome-react

Weekly Downloads

4

Version

0.3.2

License

ISC

Last publish

Collaborators

  • southbridge
  • thakerng