{"id":22260892,"url":"https://github.com/jcanno/use-jsx","last_synced_at":"2025-08-01T08:09:09.708Z","repository":{"id":45105814,"uuid":"425662437","full_name":"Jcanno/use-jsx","owner":"Jcanno","description":"Use JSX in native","archived":false,"fork":false,"pushed_at":"2022-01-23T09:39:20.000Z","size":49,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-28T06:51:25.205Z","etag":null,"topics":["babel","jsx","virtual-dom"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Jcanno.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":"2021-11-08T01:33:45.000Z","updated_at":"2022-04-12T08:17:00.000Z","dependencies_parsed_at":"2022-09-18T12:21:05.369Z","dependency_job_id":null,"html_url":"https://github.com/Jcanno/use-jsx","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/Jcanno/use-jsx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jcanno%2Fuse-jsx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jcanno%2Fuse-jsx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jcanno%2Fuse-jsx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jcanno%2Fuse-jsx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jcanno","download_url":"https://codeload.github.com/Jcanno/use-jsx/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jcanno%2Fuse-jsx/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265262969,"owners_count":23736511,"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":["babel","jsx","virtual-dom"],"created_at":"2024-12-03T09:10:37.655Z","updated_at":"2025-07-14T08:36:09.763Z","avatar_url":"https://github.com/Jcanno.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Use-Jsx\n\nEnglish|[简体中文](https://github.com/Jcanno/use-jsx/blob/master/README.zh-CN.md)\n\n`use-jsx` can help you use jsx with babel in native JS environment, for developing simple component in page.\n\n## Features\n\n- Fragment\n- Function Component\n- virtual dom tree namespace\n\n## How to use\n\n### 1. Type commands in terminal to install `use-jsx`:\n\n```shell\n# with npm\nnpm install use-jsx\n\n# with yarn\nyarn add use-jsx\n```\n\n### 2. Config babel\n\n`use-jsx` supports manual import and auto import babel config mode.\n\n- import jsx in manual:\n\n  ```js\n  {\n    // you need to install @babel/plugin-transform-typescript if you use TypeScript\n    [\n      '@babel/plugin-transform-typescript',\n      {\n        isTSX: true,\n        // config X.createElement, X is customized, it's required to be the same in your source code.\n        jsxPragma: 'X.createElement',\n        // config X.Fragment, X is customized, it's required to be the same in your source code.\n        jsxPragmaFrag: 'X.Fragment',\n      },\n    ],\n    [\n      '@babel/plugin-transform-react-jsx',\n      {\n        // config X.createElement, X is customized, it's required to be the same in your source code.\n        pragma: 'X.createElement',\n        // config X.Fragment, X is customized, it's required to be the same in your source code.\n        pragmaFrag: 'X.Fragment',\n      },\n    ],\n  }\n  ```\n\n  import `use-jsx` in your source code:\n\n  ```js\n  import * as X from 'use-jsx'\n  ```\n\n  X needs to be consistent with your babel config.\n\n- import jsx in automatic mode:\n\n  ```js\n  {\n    plugins: [\n      [\n        // you need to install @babel/plugin-transform-typescript if you use TypeScript\n        '@babel/plugin-transform-typescript',\n        {\n          isTSX: true,\n        },\n      ],\n      [\n        '@babel/plugin-transform-react-jsx',\n        {\n          runtime: 'automatic',\n          importSource: 'use-jsx',\n        },\n      ],\n    ]\n  }\n  ```\n\n  You don't need import `use-jsx` anymore, it's all done by babel.\n\n### 3. Render your jsx\n\nuse `render` to generate Actual DOM to HTML page.\n\n```jsx\nimport { render } from 'use-jsx'\n\nrender(\u003cdiv\u003eIt's generated by use-jsx\u003c/div\u003e, document.body, 'greeting')\n\n// use-jsx support to render function which returns jsx\nrender(\n  \u003cMyComponent customProprs={myProps}\u003e\u003c/MyComponent\u003e,\n  document.getElementById('myDiv'),\n  'myComponent',\n)\n```\n\nrender receives three arguments, first for custom jsx or function which returns jsx, second for real element which jsx mouted, the last is namespace for tree, `default` by default\n\n### 4. useDom\n\nif we want to get Actual DOM, `useDom` can help.\n\n```js\nfunction MyComponent() {\n  // useDom offer div actual DOM, so we can do some things such as getting div actual size to `getBoundingClientRect`\n  const useDom = (dom) =\u003e {\n    const domRect = dom.getBoundingClientRect()\n  }\n\n  return \u003cdiv id={POPOVERID} useDom={useDom} /\u003e\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcanno%2Fuse-jsx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcanno%2Fuse-jsx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcanno%2Fuse-jsx/lists"}