{"id":19655510,"url":"https://github.com/ritwickdey/react-jsx-templating","last_synced_at":"2025-04-28T18:31:27.604Z","repository":{"id":34362905,"uuid":"177776600","full_name":"ritwickdey/react-jsx-templating","owner":"ritwickdey","description":"A very simple React library for templating syntax in JSX, inspired by Angular (e.g. *ngIf )  :)","archived":false,"fork":false,"pushed_at":"2022-12-09T17:17:36.000Z","size":1587,"stargazers_count":20,"open_issues_count":45,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-09-14T13:37:45.063Z","etag":null,"topics":["jsx","react","react-library","reactjs","syntax","templating"],"latest_commit_sha":null,"homepage":"https://ritwickdey.github.io/react-jsx-templating/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ritwickdey.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-26T11:41:12.000Z","updated_at":"2024-07-02T01:14:26.000Z","dependencies_parsed_at":"2023-01-15T06:45:15.387Z","dependency_job_id":null,"html_url":"https://github.com/ritwickdey/react-jsx-templating","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ritwickdey%2Freact-jsx-templating","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ritwickdey%2Freact-jsx-templating/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ritwickdey%2Freact-jsx-templating/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ritwickdey%2Freact-jsx-templating/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ritwickdey","download_url":"https://codeload.github.com/ritwickdey/react-jsx-templating/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224126099,"owners_count":17259981,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jsx","react","react-library","reactjs","syntax","templating"],"created_at":"2024-11-11T15:21:47.295Z","updated_at":"2024-11-11T15:21:48.786Z","avatar_url":"https://github.com/ritwickdey.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Jsx Templating\n\n\u003e React Jsx Templating is a simple library, inspired by Angular :)\n\n[![NPM](https://img.shields.io/npm/v/react-jsx-templating.svg)](https://www.npmjs.com/package/react-jsx-templating) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com) [![Build Status](https://travis-ci.com/ritwickdey/react-jsx-templating.svg?branch=master)](https://travis-ci.com/ritwickdey/react-jsx-templating)\n\n`React Jsx Templating` will give you templating syntax like Angular `*ngIf`\n\n**_Live Example: [Open in Codesandbox](https://codesandbox.io/s/j312l1m2x9)_**\n\n## Install\n\n```bash\nnpm install --save react-jsx-templating\n```\n\n## Usage\n\n- **Use HOC**\n\n```jsx\nimport withTemplating from 'react-jsx-templating'; //Note: default import\nclass MyComponent extends Component  {\n  render()\n    return \"foo\";\n  }\n}\n\nexport default withTemplating(MyComponent);\n```\n\n- Use Wrapper HTML tags\n\n```jsx\n// Note: named import. There are total 118 Elements\nimport { Fragment, Div, P, Button, Br, Span } from 'react-jsx-templating';\n```\n\n## Syntax\n\n- If-else\n\n```diff\n  let isEnglish = false;\n+ \u003cEnglishNewsPaper $if={isEnglish} $else={SpanishNewsPaper} /\u003e\n```\n\n- switch-case\n\n```diff\n    let testValue = 'c';\n+   \u003cDiv $switch={testValue}\u003e\n+     \u003cdiv $case={'a'}\u003eA\u003c/div\u003e\n+     \u003cdiv $case={'b'}\u003eB\u003c/div\u003e\n+     \u003cdiv $case={'c'}\u003eC\u003c/div\u003e\n+     \u003cdiv $default\u003eNo Match\u003c/div\u003e\n+   \u003c/Div\u003e\n```\n\n- for-loop\n\n```diff\n    let people = [{id: 1, name:'Ritwick'}, {id:2, name:'Akash'}]\n+    \u003cDiv $for={people} $key={person =\u003e person.id}\u003e\n+      {person =\u003e \u003cdiv\u003e{person.name}\u003cdiv\u003e}\n+    \u003c/Div\u003e\n```\n\n## Examples\n\n- **Switch-Case Templating**\n\n```jsx\nimport React, { useState } from 'react';\nimport { Div } from 'react-jsx-templating';\n\nfunction ExampleSwitchCase() {\n  const [animal, setAnimal] = useState('');\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cinput\n        placeholder={'type `dog` or `cat`'}\n        value={animal}\n        onChange={e =\u003e setAnimal(e.target.value)}\n      /\u003e\n      \u003cDiv $if={animal} $else={() =\u003e \u003cdiv\u003ePlease type!! \u003c/div\u003e}\u003e\n        \u003cDiv $switch={animal}\u003e\n          \u003cdiv $case={'dog'}\u003ewoof-woof 🐕\u003c/div\u003e\n          \u003cdiv $case={'cat'}\u003emeows meows 🐈\u003c/div\u003e\n          \u003cdiv $default\u003eOps!! No Match! \u003c/div\u003e\n        \u003c/Div\u003e\n      \u003c/Div\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n- **If-Else Templating**\n\n```jsx\nimport React, { Component } from 'react';\nimport { Div, Fragment, Button, Br } from 'react-jsx-templating';\nimport { EnglishNewsPaper, SpanishNewsPaper } from './Components';\n\nclass ExampleIfElse extends Component {\n  state = {\n    isEngLang: true\n  };\n\n  toogleLanguage = () =\u003e {\n    this.setState(oldState =\u003e ({ isEngLang: !oldState.isEngLang }));\n  };\n\n  render() {\n    const { isEngLang } = this.state;\n    return (\n      \u003cdiv\u003e\n        \u003cFragment $if={isEngLang} $else={\u003c\u003eHola!\u003c/\u003e}\u003e\n          Hello!\n        \u003c/Fragment\u003e\n        \u003cEnglishNewsPaper $if={isEngLang} $else={SpanishNewsPaper} /\u003e\n        \u003cButton onClick={this.toogleLanguage}\u003eToggle Language\u003c/Button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n- **For Loop**\n\n```jsx\nimport React from 'react';\nimport { Div } from 'react-jsx-templating';\nimport { Article } from './Components';\n\nfunction ExampleForLoop() {\n  return (\n    \u003cDiv $for={Articles} $key={({ id }) =\u003e id}\u003e\n      {article =\u003e \u003cArticle article={article} /\u003e}\n    \u003c/Div\u003e\n  );\n}\n```\n\n## What's next ?\n\n- ~~Switch Case~~ (added)\n- ~~Loop~~ (added)\n- ~~Fragment~~ (added)\n\n## License\n\nMIT © [ritwickdey](https://github.com/ritwickdey)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fritwickdey%2Freact-jsx-templating","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fritwickdey%2Freact-jsx-templating","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fritwickdey%2Freact-jsx-templating/lists"}