{"id":25096206,"url":"https://github.com/xjpro/react-in-angularjs","last_synced_at":"2025-04-07T12:05:24.407Z","repository":{"id":37479045,"uuid":"160742133","full_name":"xjpro/react-in-angularjs","owner":"xjpro","description":"A super simple way to render React components in AngularJS","archived":false,"fork":false,"pushed_at":"2025-01-06T17:54:17.000Z","size":316,"stargazers_count":24,"open_issues_count":6,"forks_count":13,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-31T10:04:29.645Z","etag":null,"topics":["angularjs","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xjpro.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-06T22:48:56.000Z","updated_at":"2025-01-14T11:27:23.000Z","dependencies_parsed_at":"2024-06-18T21:36:03.574Z","dependency_job_id":"4b13adc7-f0b6-4c17-95c2-ea625cb63f47","html_url":"https://github.com/xjpro/react-in-angularjs","commit_stats":{"total_commits":58,"total_committers":5,"mean_commits":11.6,"dds":"0.10344827586206895","last_synced_commit":"613c0b2146bf58382e09d2a417178fd2d06271b9"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xjpro%2Freact-in-angularjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xjpro%2Freact-in-angularjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xjpro%2Freact-in-angularjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xjpro%2Freact-in-angularjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xjpro","download_url":"https://codeload.github.com/xjpro/react-in-angularjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247648976,"owners_count":20972945,"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":["angularjs","react"],"created_at":"2025-02-07T16:22:06.885Z","updated_at":"2025-04-07T12:05:24.387Z","avatar_url":"https://github.com/xjpro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-in-angularjs\n\nA super simple way to render React components in AngularJS. This was written with the goal of\nfacilitating conversion of an AngularJS app without doing a full rewrite. \n\n## Versions\n\nSupport for React 18 started in `react-in-angularjs@18`\n\nSupport for versions 16 or less use `react-in-angularjs@17.7.1`\n\n## Install\nThe function contained in this library is small enough that you might just want to copy paste it. \nFeel free to do so. Otherwise:\n\n`npm install react-in-angularjs`\n\n`yarn add react-in-angularjs`\n\n## Usage\n\n```js\nimport React from \"react\";\nimport {angularize} from \"react-in-angularjs\";\n\n// Note: This also works with class components\nconst TodoList = ({todos}) =\u003e  {\n  return (\n    \u003col\u003e\n      {todos.map(todo =\u003e (\n        \u003cli key={todo._id}\u003e\n          {todo.description}\n        \u003c/li\u003e\n      ))}\n    \u003c/ol\u003e\n  );\n};\n\nangularize(TodoList, \"todoList\", angular.module(\"app\"), {\n  todos: \"\u003c\"\t\n});\n\n// You don't actually have to export anything to make this work but\n// you'll likely want to for tests and use in other components\nexport default TodoList;\n```\n\nTodoList React component now wrapped in an AngularJS component named \"todoList\". Sometime later in your app...\n\n```html\n\u003ctodo-list todos=\"todos\"\u003e\u003c/todo-list\u003e\n```\n\n## Building\n\nSince you likely don't have a normal React entry point, you'll need to leverage webpack's \nability to have multiple entry points. I accomplish this in my own project using `glob`:\n\n```js\nconst glob = require(\"glob\");\nconst path = require(\"path\");\n\nmodule.exports = {\n  devtool: \"source-map\",\n  entry: glob.sync(\"./src/**/!(*.test).jsx\"),\n  output: {\n    filename: \"[name].js\",\n    path: path.resolve(__dirname, \"dist\") \n  }\n};\n```\n\n## Services \n\nWhen you need to access an Angular service, you can access it with a separate function:\n\n```js\n// AngularJS code includes a service you'd like to use and can't rewrite yet:\nwindow.angular.module(\"myApp\").service(\"todoService\", () =\u003e {\n  // Some very lovingly crafted service code\n});\n\nimport {getService} from \"react-in-angularjs\"\nconst todoService = getService(\"todoService\");\n// Now you've got the singleton instance of it\n```\n\nThis can also be used to fetch built-in AngularJS services like $timeout, $http, etc.\n\n## Directives\n\nSometimes you really need the resulting component to be a directive, typically\nwhen doing tables. For those situations, do this:\n\n```js\nimport React from \"react\";\nimport {angularizeDirective} from \"react-in-angularjs\";\n\nconst SpecialTableHeader = ({data}) =\u003e  {\n  const sort = () =\u003e {\n    // Very special sort logic\n  } \n\n  return (  \n    \u003cthead\u003e\n      \u003ctr\u003e\n        \u003cth onClick={sort}\u003eSomething\u003c/th\u003e\n      \u003c/tr\u003e\n    \u003c/thead\u003e\n  );\n};\n\nangularizeDirective(SpecialTableHeader, \"specialTableHeader\", angular.module(\"app\"), {\n  data: \"\u003c\"\t\n});\n```\n\n```html\n\u003ctable\u003e\n    \u003cthead special-table-header data=\"data\"\u003e\u003c/thead\u003e\n    \u003ctbody\u003e\n    ...etc.\n\u003c/table\u003e\n```\n\nBy default this uses `replace: true` so your HTML stays intact with no wrapping\ntag.\n\n## Caveats\n\n### AngularJS within React\n\nYou can't use AngularJS components within the React render so you'll need to work bottom up, i.e. \nreplace low level components first. Low level components can be then be imported directly into\nyour React components as well as used in legacy AngularJS (assuming they are angularized).\n\n### Two Way Bindings\n\nTwo way bindings are not recommended, either by the AngularJS team or by me. However, it's not always possible to\nremove them in a legacy application. In those cases, you can apply changes in two ways:\n\n###### Use $timeout\n\n```js\nconst TodoItem = ({todo}) =\u003e {\n  // imagine some React component with a change handler\n  const onChange = () =\u003e {\n    // get Angular's $timeout wrapper using getService\n    const $timeout = getService(\"$timeout\"); \n    $timeout(() =\u003e {\n      todo.value = \"new value\"\n    });\n  }\t\n}\n```\n\n###### Use $scope\n\nreact-in-angularjs provides the wrapping AngularJS's component $scope as a prop\n\n```js\nconst TodoItem = ({todo, $scope}) =\u003e {\n  // imagine some React component with a change handler\n  const onChange = () =\u003e {\n    $scope.$apply(() =\u003e {\n      // $scope = AngularJS component scope, provided on a prop\n      todo.value = \"new value\"\n    });\n  };\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxjpro%2Freact-in-angularjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxjpro%2Freact-in-angularjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxjpro%2Freact-in-angularjs/lists"}