{"id":13452621,"url":"https://github.com/ui-router/react-hybrid","last_synced_at":"2025-09-11T17:09:13.245Z","repository":{"id":22510499,"uuid":"96561882","full_name":"ui-router/react-hybrid","owner":"ui-router","description":"Hybrid adapter for routing to AngularJS and React components","archived":false,"fork":false,"pushed_at":"2023-07-11T13:32:26.000Z","size":1386,"stargazers_count":88,"open_issues_count":18,"forks_count":39,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T08:07:59.426Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ui-router.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2017-07-07T17:41:09.000Z","updated_at":"2024-04-03T08:27:06.000Z","dependencies_parsed_at":"2024-01-16T03:46:35.463Z","dependency_job_id":"1def11eb-2af8-4376-b256-fb7e64d65429","html_url":"https://github.com/ui-router/react-hybrid","commit_stats":null,"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-router%2Freact-hybrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-router%2Freact-hybrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-router%2Freact-hybrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ui-router%2Freact-hybrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ui-router","download_url":"https://codeload.github.com/ui-router/react-hybrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247457803,"owners_count":20941906,"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-07-31T07:01:29.457Z","updated_at":"2025-04-06T09:09:23.260Z","avatar_url":"https://github.com/ui-router.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# UI-Router react-hybrid\n\n### UI-Router support for Hybrid Angular/React apps\n\nThis package enables UI-Router to route to both AngularJS components (and/or templates) and React components.\nYour app will be hosted by AngularJS while you incrementally migrate to React.\n\n```js\nimport { ReactAboutComponent } from \"./about.component\";\n\n/// ...\n\n$stateProvider.state({\n  name: 'home', \n  url: '/home',\n  component: 'ng1HomeComponent' // AngularJS component or directive name\n})\n\n.state({\n  name: 'about', \n  url: '/about',\n  component: ReactAboutComponent // React component class reference\n});\n\n.state({\n  name: 'other',\n  url: '/other',\n  template: '\u003ch1\u003eOther\u003c/h1\u003e', // AngularJS template/controller\n  controller: function($scope) { /* do stuff */ }\n})\n\n```\n\nWhen routing to a React component, that component can use the standard\n[React directives (UIView, UISref, UISrefActive) from `@uirouter/react`](https://ui-router.github.io/react/docs/latest/modules/components.html).\n\nWhen routing to an AngularJS component or template, that component uses the standard\n[AngularJS directives (ui-view, ui-sref, ui-sref-active) from `@uirouter/angularjs`](https://ui-router.github.io/ng1/docs/latest/modules/directives.html).\n\n### Getting started\n\nRemove `angular-ui-router` (or `@uirouter/angularjs`) from your package.json and replace it with `@uirouter/react-hybrid`.\nAdd the `react` and `react-dom` dependencies.\n\n```\ndependencies: {\n  ...\n  \"angular\": \"^1.6.0\",\n  \"react\": \"^15.4.0\",\n  \"react-dom\": \"^15.4.0\",\n   ...\n  \"@uirouter/react-hybrid\": \"^0.0.8\",\n  ...\n}\n```\n\n#### Add AngularJS module for hybrid support\n\n```js\nimport { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';\nlet ng1module = angular.module(\"myApp\", ['ui.router', UI_ROUTER_REACT_HYBRID]);\n```\n\n#### Route to AngularJS components/templates\n\nYour existing AngularJS routes work the same as before.\n\n```\nvar foo = { \n  name: 'foo',\n  url: '/foo',\n  component: 'fooComponent'\n};\n$stateProvider.state(foo);\n\nvar bar = { \n  name: 'foo.bar',\n  url: '/bar',\n  templateUrl: '/bar.html',\n  controller: 'BarController'\n};\n$stateProvider.state(bar);\n```\n\n#### Route to React components\n\nUse `component:` in your state declaration.\n\n```\nvar leaf = { \n  name: 'foo.bar.leaf',\n  url: '/leaf',\n  component: MyReactComponentClass\n};\n$stateProvider.state(leaf);\n```\n\n\n## How it works\n\n### React and AngularJS ui-views\n\nAn AngularJS `\u003cui-view\u003e` can have default content.\nThis default content is rendered when no state is filling the `ui-view` with a component.\nFor example, a parent state may render a `ui-view` portal, but want `Default Content` to display\nwhen no child state is active: `\u003cui-view\u003eDefault Content\u003c/ui-view\u003e`.\n\nThe `@uirouter/react-hybrid` project **sets the default content to an adapter component**, `\u003creact-ui-view-adapter\u003e`.\nThe `react-ui-view-adapter` then renders a React `\u003cUIView/\u003e`.\n\nWhen a state loads an AngularJS view into the AngularJS `\u003cui-view\u003e`, it replaces the `react-ui-view-adapter` default content.\n\nWhen a state loads a React Component into the React `\u003cUIView/\u003e` component, it is nested inside the AngularJS components like so:\n\n```html\n\u003cui-view\u003e // angularjs\n  \u003creact-ui-view-adapter\u003e // angularjs\n    \u003cUIView\u003e // react\n      \u003cRoutedReactComponent/\u003e //react\n    \u003c/UIView\u003e\n  \u003c/react-ui-view-adapter\u003e\n\u003c/ui-view\u003e\n```\n\n### Providing \"context\" to children\n\nIn AngularJS, each `\u003cui-view\u003e` provides the state context to its children elements, such as `ui-sref` or `ui-view`.\nThe state context allows a `ui-sref` to use relative links, for example.\nAngularJS provides this context by setting hidden data on its DOM element, using `angular.element(el).data('$uiView')`.\nAny nested `ui-view` or `ui-sref` fetches the context by asking for `angular.element(childel).inheritedData('$uiView')`.\n\nIn React, each `UIView` provides the state context to its children elements using [React context](https://facebook.github.io/react/docs/context.html).\nThe nested `UIView` or `UISref` fetches the state context using the React context API.\n\nThere is some glue provided by `@uirouter/react-hybrid` which bridges these two context mechanisms.\nWhen a React `UIView` component is rendered, it is wrapped in a `UIRouterReactContext` component.\nThe component finds the state context by looking first via React props, and second via AngularJS DOM data.\nIt then provides the state context to its children using React props.\n\nThe `\u003creact-ui-view-adapter\u003e` wraps a React `UIView` component.\nWhen the react `UIView` is filled by a state's react component, the `react-ui-view-adapter` gets the state context for the newly filled `UIView`.\nIt then provides that context to AngularJS components using AngularJS DOM data.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-router%2Freact-hybrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fui-router%2Freact-hybrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fui-router%2Freact-hybrid/lists"}