Skip to content

A very simple React library for templating syntax in JSX, inspired by Angular (e.g. *ngIf ) :)

License

Notifications You must be signed in to change notification settings

ritwickdey/react-jsx-templating

Repository files navigation

React Jsx Templating

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

NPM JavaScript Style Guide Build Status

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

Live Example: Open in Codesandbox

Install

npm install --save react-jsx-templating

Usage

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

export default withTemplating(MyComponent);
  • Use Wrapper HTML tags
// Note: named import. There are total 118 Elements
import { Fragment, Div, P, Button, Br, Span } from 'react-jsx-templating';

Syntax

  • If-else
  let isEnglish = false;
+ <EnglishNewsPaper $if={isEnglish} $else={SpanishNewsPaper} />
  • switch-case
    let testValue = 'c';
+   <Div $switch={testValue}>
+     <div $case={'a'}>A</div>
+     <div $case={'b'}>B</div>
+     <div $case={'c'}>C</div>
+     <div $default>No Match</div>
+   </Div>
  • for-loop
    let people = [{id: 1, name:'Ritwick'}, {id:2, name:'Akash'}]
+    <Div $for={people} $key={person => person.id}>
+      {person => <div>{person.name}<div>}
+    </Div>

Examples

  • Switch-Case 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>
  );
}
  • If-Else Templating
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>
    );
  }
}
  • For Loop
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>
  );
}

What's next ?

  • Switch Case (added)
  • Loop (added)
  • Fragment (added)

License

MIT © ritwickdey