{"id":25008088,"url":"https://github.com/vend/reactular","last_synced_at":"2025-03-30T01:15:23.675Z","repository":{"id":144616453,"uuid":"359567648","full_name":"vend/reactular","owner":"vend","description":"Use React components in Angular 1","archived":false,"fork":false,"pushed_at":"2024-02-19T03:28:57.000Z","size":461,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":41,"default_branch":"main","last_synced_at":"2024-04-14T12:30:33.901Z","etag":null,"topics":["backstage-exclude"],"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/vend.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":"2021-04-19T18:58:27.000Z","updated_at":"2022-08-27T08:04:45.000Z","dependencies_parsed_at":"2025-02-05T02:56:59.017Z","dependency_job_id":"8ccd5dc2-c030-4e8b-820a-a03a6059d0e5","html_url":"https://github.com/vend/reactular","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vend%2Freactular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vend%2Freactular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vend%2Freactular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vend%2Freactular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vend","download_url":"https://codeload.github.com/vend/reactular/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246262599,"owners_count":20749175,"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":["backstage-exclude"],"created_at":"2025-02-05T02:56:55.063Z","updated_at":"2025-03-30T01:15:23.655Z","avatar_url":"https://github.com/vend.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# reactular\n\nReactular allows you to use React components in AngularJS (Angular 1.x). It began as a fork of [react2angular](https://github.com/coatue-oss/react2angular). See the [comparison below](#comparison-to-react2angular) for differences.\n\n## Installation\n\n```sh\n# Using NPM:\nnpm install @vendhq/reactular react react-dom\n\n# Or, using Yarn:\nyarn add @vendhq/reactular react react-dom\n```\n\n## Usage\n\nBasic usage looks like this:\n\n```js\nimport angular from 'angular';\nimport React from 'react';\n\nconst HelloComponent = () =\u003e {\n    return \u003cspan\u003eHello, world!\u003c/span\u003e;\n}\n\nangular\n  .module('myModule', [])\n  .component('helloComponent', reactular(HelloComponent));\n```\n\nIf you need to pass props to your React component, you must specify them in the call to `reactular`:\n\n```js\nimport angular from 'angular';\nimport React from 'react';\n\nconst HelloComponent = (name) =\u003e {\n    return \u003cspan\u003eHello, world!\u003c/span\u003e;\n}\n\nangular\n  .module('myModule', [])\n  .component('helloComponent', reactular(HelloComponent), ['name']);\n```\n\n### Wrapper Component\n\nThe optional third parameter passed to reactular may specify a wrapping React component, either directly as a class or functional component, or as a string which is resolved into a component through AngularJS's `$injector`. Most commonly the wrapper component is used to provide context to React components.\n\n#### Functional Wrapper\n\nBasic wrapper usage might look like this:\n\n```js\nimport angular from 'angular';\nimport React from 'react';\n\nconst MyContext = React.createContext();\n\nconst wrapper = ({ children }) =\u003e \u003cMyContext.Provider value=\"world\"\u003e{children}\u003c/MyContext.Provider\u003e;\n\nconst HelloComponent = () =\u003e {\n    const value = React.useContext(MyContext);\n    return \u003cspan\u003eHello, {value}!\u003c/span\u003e;\n}\n\nangular\n  .module('myModule', [])\n  .component('helloComponent', reactular(HelloComponent, [], wrapper));\n```\n\nYou could use this functionality to ensure that every React component has access to something, such as a Redux store or an Apollo client.\n\n#### AngularJS Injectable Wrapper\n\nUsing an AngularJS injectable as the wrapper, it's possible to give your React components access to AngularJS injectables. You can also wrap up this logic in a custom hook.\n\n```js\nimport angular from 'angular';\nimport React from 'react';\n\nconst MyContext = React.createContext();\n\nconst useFilter = () =\u003e React.useContext(MyContext)\n\nconst HelloComponent = () =\u003e {\n    // Get AngularJS's $filter through the context.\n    const $filter = useFilter();\n    const uppercase = $filter('uppercase');\n    return \u003cspan\u003eHello, {uppercase('world')}!\u003c/span\u003e;\n}\n\nangular\n  .module('myModule', [])\n  .factory('reactWrapper', $filter =\u003e {\n      return ({ children }) =\u003e \u003cMyContext.Provider value={$filter}\u003e{children}\u003c/MyContext.Provider\u003e;\n  })\n  .component('helloComponent', reactular(HelloComponent, [], 'reactWrapper'));\n```\n\n## Limitations\n\n### Transclusion\n\nTransclusion is not supported. It could be added in the future, given a reasonable use case and implementation proposal.\n\nIt may be possible to work around this limitation in some cases. If you have a React component and you wish to \"transclude\" other React components, you might be able to create another component that does all the transclusion on the React side. For example, imagine that we have a component `Parent` and two other components, `Child1` and `Child2` that we want to transclude:\n\n```js\nconst ComponentWithTransclusion = () =\u003e (\n  \u003cParent\u003e\n    \u003cChild1 /\u003e\n    \u003cChild2 /\u003e\n  \u003c/Parent\u003e\n)\n\nangular.component('componentWithTransclusion', reactular(ComponentWithTransclusion));\n```\n\nIf the components you want to transclude exist on the AngularJS side, you could look at wrapping them with something like [angular2react](https://github.com/coatue-oss/angular2react) to make them available on the React side. This starts to become pretty complicated pretty fast, however.\n\n### Binding\n\nOnly expression AngularJS binding (`\u003c`) is supported. There is probably not any reasonable way to introduce support for two-way binding.\n\n## Comparison to react2angular\n\nBasic usage and behavior of Reactular is similar to react2angular, but it differs in a few ways.\n\n### Rendering\n\nreact2angular does a shallow prop check every time the AngularJS `$onChanges` method is called and only re-renders the React component when it detects a change. (See [coatue-oss/react2angular#93](https://github.com/coatue-oss/react2angular/issues/93).)\n\nReactular re-renders the React component every time `$onChanges` is called. You may wrap your component with `React.memo` to get behavior similar to react2angular.\n\n### Dependency Injection\n\nReactular does not directly support injecting AngularJS dependencies through props the way react2angular does. Instead, if you need to access AngularJS dependencies, do it through [wrapper components](#angularjs-injectable-wrapper) and React context. This makes it easier to use the same components from both AngularJS and React.\n\n### Prop Types\n\nReactular does not have any special support for prop types. Prop names must always be passed to the `reactular` function.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvend%2Freactular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvend%2Freactular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvend%2Freactular/lists"}