{"id":27213517,"url":"https://github.com/toondkn/ngrc","last_synced_at":"2026-05-05T09:32:55.396Z","repository":{"id":39117472,"uuid":"265934109","full_name":"toondkn/ngrc","owner":"toondkn","description":"ES module to generate angular (1.5+) component definitions from react components","archived":false,"fork":false,"pushed_at":"2023-10-06T09:36:45.000Z","size":161,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-16T21:35:23.576Z","etag":null,"topics":["angular","angular-template","angularjs","component","hybrid","props","react","react-components","reactjs","refactor"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/toondkn.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":"2020-05-21T19:27:09.000Z","updated_at":"2023-10-05T09:37:55.000Z","dependencies_parsed_at":"2024-12-05T23:31:04.060Z","dependency_job_id":"23da49d2-45b7-4135-9a01-633125b2d5fb","html_url":"https://github.com/toondkn/ngrc","commit_stats":null,"previous_names":["fluxarray/ngrc"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/toondkn/ngrc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toondkn%2Fngrc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toondkn%2Fngrc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toondkn%2Fngrc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toondkn%2Fngrc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/toondkn","download_url":"https://codeload.github.com/toondkn/ngrc/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toondkn%2Fngrc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32643678,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"online","status_checked_at":"2026-05-05T02:00:06.033Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["angular","angular-template","angularjs","component","hybrid","props","react","react-components","reactjs","refactor"],"created_at":"2025-04-10T02:42:42.844Z","updated_at":"2026-05-05T09:32:55.375Z","avatar_url":"https://github.com/toondkn.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngrc\n\n\n## What is `ngrc`?\n\n`ngrc` is an ES2018 module to generate angularjs (1.5+) component definitions from react components.\n\nIt enables you to build anything with react components _inside_ an angularjs app:\n- Generate an angularjs component from a react component with one trivial function call\n- Use the generated components in your angularjs templates\n- Pass variables from inside your templates (~=$scope) to react components\n- Pass callbacks from your angularjs controllers and call them from react components\n- ...\n\nSimple, very lightweight, to the point.\n\nThis module has **no dependencies**, it only has `react` and `react-dom` as peer dependencies so you can decide on the versions of those.\n\nYou have to **bring your own ES2018+ transpiler and minifier** for generating production-ready code for the browser range you are targeting. This is almost a hard requirement for using react components in production anyway.\n\nLiberal use of comments in `./ngrc.js` makes up for the 0% code test coverage. 🙃\n\n\n## Use cases\n\n- Enabling devs with a react background to contribute to an existing angularjs app at their full potential\n- Using sweet new react components from npm in your angularjs app\n- Slowly converting a legacy angularjs app to react from the inside out\n- ...?\n\n\n## What is supported?\n\n- `angular` 1.5+, \u003c2\n- `react` function/class components\n- Internally, only `'\u003c'` bindings are used for angularjs component generation, which means no support for mapped function args like you would get with `'\u0026'` bindings.\n\nLimiting to `'\u003c'` bindings has a nice side-effect: it forces a clean separation between angularjs and react concepts. Allowing `'\u0026'` could result in angular's function argument object mapping to seep into your react code, making it less portable. With only `'\u003c'` bindings, your react components are **almost guaranteed to be fully portable without refactoring**. This limitation only closes a door to potential bad code, creative coders will always find another.\n\n\n\n# How does it work?\n\nThis package provides a function to generate an angularjs component definition based on a react component you pass into it.\n\nIt will infer the angularjs bindings from your component's `.propTypes` definition, if available.\n\nIf you are not using the `prop-types` package, or wish to only expose a subset of props as bindings, you can define a `.ngrcBinds` property on your react component. It must be an array of strings, corresponding to the names of the props you wish to expose. You can assign `.ngrcBinds` from outside your component code to increase your component's portability.\n\n`ngrc` will prefix all bindings with `\"p-\"` to avoid collisions with HTML attributes. This allows eg. `style=\"color: pink;\"` and `p-style=\"{ backgroundColor: 'dodgerblue' }\"` to co-exist.\n\nThis prefix can be customized, but not disabled.\n\n\n# Learn by example\n\nAll example code assumes ES module compatible build tools and `npm` are used for your project.\n\n\n## First up, installing...\n\n```sh\nnpm i ngrc\n```\n\n\n## Using a react component in an angularjs template, while passing in a scope variable as a prop\n\n```js\nimport ngrc from 'ngrc'\nimport react from 'react'\nimport PropTypes from 'prop-types'\nimport angularjs from 'angular'\n\n// define a react component\nfunction MyComponent(props) {\n    return (\n        \u003cdiv\u003e{props.value}\u003c/div\u003e\n    )\n}\nMyComponent.propTypes = {\n    value: PropTypes.number,\n}\n\n// your angularjs app\nangular.module('myApp')\n    // --- register your react component with angularjs ---\n    // camelCase the component name, angularjs expects it this way\n    .component('myComponent', ngrc(MyComponent))\n    // --- this is all you need ---\n    .controller('myCtrl', ['$scope', function($scope) {\n        $scope.value = 42\n    }])\n```\n\nUsing the component in your angularjs templates:\n```html\n\u003c!-- SNIP --\u003e\n\u003cbody ng-app=\"myApp\"\u003e\n    \u003cdiv ng-controller=\"myCtrl\"\u003e\n        \u003c!-- remember the `p-` prefix when passing in a prop via the component's element attribute. --\u003e\n        \u003cmy-component p-value=\"value\"\u003e\u003cmy-component\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n```\n\n\n## Using a react component (no `.propTypes`) in an angularjs template, while passing in a scope variable as a prop\n\n```js\n// SNIP\nfunction MyComponent(props) {\n    return (\n        \u003cdiv\u003e{props.value}\u003c/div\u003e\n    )\n}\n// if you don't have/want prop-types,\n// or limit the props that get exposed to a subset of the propTypes\nMyComponent.ngrcBinds = ['value']\n\nangular.module('myApp')\n    .component('myComponent', ngrc(MyComponent))\n    // SNIP\n```\n\nUsing the component in your angularjs templates:\n```html\n\u003c!-- SNIP --\u003e\n\u003cmy-component p-value=\"value\"\u003e\u003cmy-component\u003e\n\u003c!-- SNIP --\u003e\n```\n\n\n## Using a react component (with a custom prop attribute prefix) in an angularjs template, while passing in a scope variable as a prop\n\n```js\n//SNIP\nangular.module('myApp')\n    // pass in a custom prefix as second argument to ngrc\n    .component('myComponent', ngrc(MyComponent, 'customPrefix'))\n    // SNIP\n```\n\nUsing the component with a custom prefix in your angularjs templates:\n```html\n\u003c!-- SNIP --\u003e\n\u003cmy-component custom-prefix-value=\"value\"\u003e\u003cmy-component\u003e\n\u003c!-- SNIP --\u003e\n```\n\n\n## Basic 2-way dataflow from angularjs ⇄ react\n\nSee the `./example` folder of the repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoondkn%2Fngrc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoondkn%2Fngrc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoondkn%2Fngrc/lists"}