Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ritwickdey/react-jsx-templating
A very simple React library for templating syntax in JSX, inspired by Angular (e.g. *ngIf ) :)
https://github.com/ritwickdey/react-jsx-templating
jsx react react-library reactjs syntax templating
Last synced: about 1 month ago
JSON representation
A very simple React library for templating syntax in JSX, inspired by Angular (e.g. *ngIf ) :)
- Host: GitHub
- URL: https://github.com/ritwickdey/react-jsx-templating
- Owner: ritwickdey
- License: mit
- Created: 2019-03-26T11:41:12.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T17:17:36.000Z (about 2 years ago)
- Last Synced: 2024-09-14T13:37:45.063Z (3 months ago)
- Topics: jsx, react, react-library, reactjs, syntax, templating
- Language: JavaScript
- Homepage: https://ritwickdey.github.io/react-jsx-templating/
- Size: 1.51 MB
- Stars: 20
- Watchers: 5
- Forks: 5
- Open Issues: 45
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Jsx Templating
> React Jsx Templating is a simple library, inspired by Angular :)
[](https://www.npmjs.com/package/react-jsx-templating) [](https://standardjs.com) [](https://travis-ci.com/ritwickdey/react-jsx-templating)
`React Jsx Templating` will give you templating syntax like Angular `*ngIf`
**_Live Example: [Open in Codesandbox](https://codesandbox.io/s/j312l1m2x9)_**
## Install
```bash
npm install --save react-jsx-templating
```
## Usage
- **Use HOC**
```jsx
import withTemplating from 'react-jsx-templating'; //Note: default import
class MyComponent extends Component {
render()
return "foo";
}
}
export default withTemplating(MyComponent);
```
- Use Wrapper HTML tags
```jsx
// Note: named import. There are total 118 Elements
import { Fragment, Div, P, Button, Br, Span } from 'react-jsx-templating';
```
## Syntax
- If-else
```diff
let isEnglish = false;
+
```
- switch-case
```diff
let testValue = 'c';
+
+ A
+ B
+ C
+ No Match
+
```
- for-loop
```diff
let people = [{id: 1, name:'Ritwick'}, {id:2, name:'Akash'}]
+
person.id}>
+ {person => {person.name}}
+
```
## Examples
- **Switch-Case Templating**
```jsx
import React, { useState } from 'react';
import { Div } from 'react-jsx-templating';
function ExampleSwitchCase() {
const [animal, setAnimal] = useState('');
return (
setAnimal(e.target.value)}
/>
Please type!! }>
woof-woof 🐕
meows meows 🐈
Ops!! No Match!
);
}
```
- **If-Else Templating**
```jsx
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 (
Hola!>}>
Hello!
Toggle Language
);
}
}
```
- **For Loop**
```jsx
import React from 'react';
import { Div } from 'react-jsx-templating';
import { Article } from './Components';
function ExampleForLoop() {
return (
id}>
{article => }
);
}
```
## What's next ?
- ~~Switch Case~~ (added)
- ~~Loop~~ (added)
- ~~Fragment~~ (added)
## License
MIT © [ritwickdey](https://github.com/ritwickdey)