{"id":15674481,"url":"https://github.com/oguimbal/ngx-react","last_synced_at":"2025-05-06T23:18:05.684Z","repository":{"id":57151429,"uuid":"410307288","full_name":"oguimbal/ngx-react","owner":"oguimbal","description":"Migrating from 🅰️ to ⚛️ ? 👉 Use React components in Angular, and vice versa ","archived":false,"fork":false,"pushed_at":"2023-09-20T17:10:04.000Z","size":68,"stargazers_count":14,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-06T23:18:00.939Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oguimbal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-25T15:23:14.000Z","updated_at":"2024-06-13T07:22:25.000Z","dependencies_parsed_at":"2024-10-23T12:04:25.342Z","dependency_job_id":null,"html_url":"https://github.com/oguimbal/ngx-react","commit_stats":{"total_commits":11,"total_committers":1,"mean_commits":11.0,"dds":0.0,"last_synced_commit":"4fc7e63eddeae9e6a466a2e8aa8393c282c926b3"},"previous_names":["oguimbal/ng-to-react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oguimbal%2Fngx-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oguimbal%2Fngx-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oguimbal%2Fngx-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oguimbal%2Fngx-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oguimbal","download_url":"https://codeload.github.com/oguimbal/ngx-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252782835,"owners_count":21803410,"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":[],"created_at":"2024-10-03T15:45:32.987Z","updated_at":"2025-05-06T23:18:05.670Z","avatar_url":"https://github.com/oguimbal.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.org/package/ngx-react\"\u003e\u003cimg src=\"http://img.shields.io/npm/v/ngx-react.svg\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/ngx-react\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/ngx-react.svg\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./.github/ng_to_react.png\" width=\"300\"\u003e\n\u003c/p\u003e\n\n \u003ch3 align=\"center\"\u003engx-react allows you to seamlessy use ⚛️ React and  🅰️ Angular components together.\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n   👉 This package will be the a perfect match to migrate from Angular to React.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n⭐ this repo if you like this package, it helps to motivate me :)\n\u003c/p\u003e\n\n# 🧑‍💻 Sample\n\nJump to the [sample](https://github.com/oguimbal/ngx-react-sample) repository for a a working sample ([here](https://stackblitz.com/github/oguimbal/ngx-react-sample) on Stackblitz)\n\n# 📐 Setup\n\n## 1) Prepare your Angular project\n\n### A) Install ngx-react:\n\n```\nnpm i ngx-react\n```\n\n### B) Install React:\n\n```\nnpm i react react-dom -S\nnpm i @types/react @types/react-dom -D\n```\n\n### C) Configure typescript so it picks up TSX:\n\n```json\n      \"jsx\": \"react-jsx\",\n```\n\n(in your tsconfig.json, under the `\"compilerOptions\"` section)\n\n### D) Add the `node_modules/ngx-react/src/*` as included in your `tsconfig.json` compilation:\n\n```json\n\n  \"include\": [\n    \"src\",  // you should already have this one if you had an \"include\" section :)\n    \"node_modules/ngx-react/src/*\" // 👈  add this\n    // [...]\n  ],\n```\n\n**(NB: If someone has a better solution that this, please tell me... but pre-compilling \u0026 publish the source seems to fail the angular build when installing this lib)**\n\n## 2) Declare your bridge\n\nAt the root of you project, declare a file `bridge.ts` :\n\n```typescript\nimport { NgxReactBridge } from \"ngx-react\";\n\n// declare the bridge\nexport const reactBridge = new NgxReactBridge();\n```\n\nyou can OPTINALLY declare there the directives that will be available in your react componetns globaly, such as, for instance:\n\n```typescript\nexport const reactBridge = new NgxReactBridge();\n    .addDirective('focus', (focus: boolean, _, elt) =\u003e setTimeout(() =\u003e focus \u0026\u0026 elt.focus()))\n```\n\n## 3) Enjoy\n\nYou can now use React \u0026 Angular together 🥳\n\n# Use 🅰️ Angular components in ⚛️ React\n\nSuppose you have an Angular component `MyAngularComponent` you would like to use in React.\n\nIn your component declaration file, just put:\n\n```typescript\nimport { reactBridge } from \"./bridge\";\n\n// [...] MyAngularComponent declaration\n\n// this will be usable in React:\nexport const MyAngular = reactBridge.toReact(MyAngularComponent, {\n  // declares that this component accepts children\n  children: true,\n});\n```\n\nThen, you'll be able to use this in react:\n\n```typescript\nimport {MyAngular} from './my-angular.component';\n\n// use the component, enjoy the types !\nconst Other = () =\u003e \u003cMyAngular input={'whatever'}\u003e;\n```\n\n# Use ⚛️ React components in 🅰️ Angular\n\nSuppose you have a React component `MyReactComponent` you would like to use in Angular.\n\nIn your component declaration file, just put:\n\n```typescript\nimport { reactBridge } from \"./bridge\";\n\nfunction MyReactComponent(props: {\n  data: string;\n  dataChange: (evt: string) =\u003e void;\n}) {\n    // [...]\n}\n\n@Directive({ selector: \"my-react-component\" })\nexport class MyReactComponent_Angular extends reactBridge.toAngular(\n  MyReactComponent\n) {\n\n  // a bit of extra work: You will have to map the properties yourself (type compatibility will be ensured by Tyepscript, though)\n  @Input()\n  data!: string;\n  @Output()\n  dataChange = new EventEmitter();\n}\n```\n\nThen, declare `MyReactComponent_Angular` in your ng-module, and you'll be able to use your component in Angular :\n\n```html\n\u003cmy-react-component [(data)]=\"whatever\"\u003e\u003c/my-react-component\u003e\n```\n\n\n# Access 🅰️ Angular services from ⚛️ React\n\nEasy\n\n```typescript\n\nfunction MyReactComp() {\n  const service = useService(SomeAngularService); // simple, isnt it ?\n}\n\n```\n\n# 🅰️ Angular outputs handling\n\nAngular outputs are bound to callback props in react.\n\nMeaning that:\n\n```typescript\n@Ouptut() valueChange: EventEmitter\u003cstring\u003e;\n```\n\nWill be bound to a react prop:\n\n```typescript\nvalueChange: (evt: string) =\u003e any;\n```\n\n# @Input / @Outputs 🅰️ vs ⚛️ React state hooks\n\nWhen importing an Angular component in React, if your angular component has a matching `@Input()` and `@Output()` property pairs, say a `value` input, and `valueChange` output, you will notice that ngx-react will add a `value$` property (name of the input, with a `$` suffix) to the corresponding react type.\n\nThis property will be typed as something which is compatible with the `useState()` react hook. Meaning that, for if you have:\n\n```typescript\n@Input() value: string;\n@Ouptut() valueChange: EventEmitter\u003cstring\u003e;\n```\n\nThen you will be able to use your component in react like that:\n\n```typescript\nconst value = useState(\"\");\n\nreturn \u003cMyComonent value$={value} /\u003e;\n```\n\n... and the `value` state will be two-way bound with your react component !\n\n(But of course, you can still use the `value: string` and `valueChange: (e: string) =\u003e any` props that ngx-react will have generated for you, if you prefer so)\n\n# 💥 TODO / Limits\n\nCurrently not supported (todo):\n\n- Integration with the Angular router\n- Inject children in React that are declared in Angular.\n","funding_links":[],"categories":["Framework Interoperability"],"sub_categories":["Cross-Framework Integration"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foguimbal%2Fngx-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foguimbal%2Fngx-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foguimbal%2Fngx-react/lists"}