import withTemplating from 'react-jsx-templating'; //Note: default import
class MyComponent extends Component  {
  render()
    return "foo";
  }
}

export default withTemplating(MyComponent);

// Note: named import. There are total 118 Elements
import { Fragment, Div, P, Button, Br, Span } from 'react-jsx-templating';

import React, { useState } from 'react';
import { Div } from 'react-jsx-templating';

function ExampleSwitchCase() {
  const [animal, setAnimal] = useState('');
  return (
    <div className="App">
      <input
        placeholder={'type `dog` or `cat`'}
        value={animal}
        onChange={e => setAnimal(e.target.value)}
      />
      <Div $if={animal} $else={() => <div>Please type!! </div>}>
        <Div $switch={animal}>
          <div $case={'dog'}>woof-woof 🐕</div>
          <div $case={'cat'}>meows meows 🐈</div>
          <div $default>Ops!! No Match! </div>
        </Div>
      </Div>
    </div>
  );
}

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

class ExampleIfElse extends Component {
  state = {
    isEngLang: true
  };

  toogleLanguage = () => {
    this.setState(oldState => ({ isEngLang: !oldState.isEngLang }));
  };

  render() {
    const { isEngLang } = this.state;
    return (
      <div>
        <Fragment $if={isEngLang} $else={<>Hola!</>}>
          Hello!
        </Fragment>
        <EnglishNewsPaper $if={isEngLang} $else={SpanishNewsPaper} />
        <Button onClick={this.toogleLanguage}>Toggle Language</Button>
      </div>
    );
  }
}

import React from 'react';
import { Div } from 'react-jsx-templating';
import { Article } from './Components';

function ExampleForLoop() {
  return (
    <Div $for={Articles} $key={({ id }) => id}>
      {article => <Article article={article} />}
    </Div>
  );
}