React Jsx Templating

React Jsx Templating is a simple library, inspired by Angular :)

React Jsx Templating will give you templating syntax like Angular *ngIf

Install

npm install --save react-jsx-templating

Usage

Live Example: https://codesandbox.io/s/j312l1m2x9

• If-Else Templating

import React, { Component } from 'react';
import { Div, P, Button, Br } from 'react-jsx-templating';
import EnglishNewsPaper from './EnglishNewsPaper';
import SpanishNewsPaper from './SpanishNewsPaper';

class Example extends Component {
  state = {
    isEngLang: true,
    hideToggler: false
  };

  toogle = stateKey => () => {
    this.setState(oldState => ({[stateKey]: !oldState[stateKey]}))
  }

  render() {
    const { isEngLang, hideToggler } = this.state;
    return ( 
      <Div>
        <P $if={isEngLang} $else={() => <P>Hola!</P>}> {/* OR, $else={<P>Hola!</P>} */}
          Hello!
        </P>
      
        <EnglishNewsPaper $if={isEngLang} $else={SpanishNewsPaper} />  {/* NOTE, $else={Component} */}
      
        <Button $if={!hideToggler} onClick={this.toogle('isEngLang')}>
          Toggle Language
        </Button>

        <Br $if={!hideToggler} />
        <Br $if={!hideToggler}/>
        
        <Button onClick={this.toogle('hideToggler')}>
          <Span $if={hideToggler}>Show Toggler</Span>
          <Span $if={!hideToggler}>Hide Toggler</Span>
        </Button>
      </Div>
    );
  }
}

// in ./EnglishNewsPaper.js
import withTemplating from 'react-jsx-templating'; //Notice, it's default import

class EnglishNewsPaper extends Component  {
  render() {
    return "English News";
  }
}

export default withTemplating(EnglishNewsPaper); 
// same thing is need to be done in `SpanishNewsPaper` component. I'm not repeating, but you got the point.

What's next ?

• Switch Case

License

MIT © ritwickdey