{"id":19110026,"url":"https://github.com/zeiss/rectangly","last_synced_at":"2025-04-30T20:40:42.343Z","repository":{"id":96897490,"uuid":"144823568","full_name":"ZEISS/rectangly","owner":"ZEISS","description":"A React renderer for Angular 4+. :triangular_ruler:","archived":false,"fork":false,"pushed_at":"2018-08-17T09:41:41.000Z","size":60,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-19T08:33:18.938Z","etag":null,"topics":["angular","angular-renderer","react","reactular","rectangular","renderer","spa","view"],"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/ZEISS.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2018-08-15T07:57:41.000Z","updated_at":"2020-01-12T00:43:31.000Z","dependencies_parsed_at":"2023-05-01T13:47:08.520Z","dependency_job_id":null,"html_url":"https://github.com/ZEISS/rectangly","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZEISS%2Frectangly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZEISS%2Frectangly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZEISS%2Frectangly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZEISS%2Frectangly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZEISS","download_url":"https://codeload.github.com/ZEISS/rectangly/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251778885,"owners_count":21642441,"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":["angular","angular-renderer","react","reactular","rectangular","renderer","spa","view"],"created_at":"2024-11-09T04:23:21.147Z","updated_at":"2025-04-30T20:40:42.320Z","avatar_url":"https://github.com/ZEISS.png","language":"TypeScript","readme":"# rectangly\n\n[![Build Status](https://travis-ci.org/ZEISS/rectangly.svg?branch=master)](https://travis-ci.org/ZEISS/rectangly)\n[![npm](https://img.shields.io/npm/v/rectangly.svg)](https://www.npmjs.com/package/rectangly)\n[![node](https://img.shields.io/node/v/rectangly.svg)](https://www.npmjs.com/package/rectangly)\n[![GitHub tag](https://img.shields.io/github/tag/ZEISS/rectangly.svg)](https://github.com/ZEISS/rectangly/releases)\n[![GitHub issues](https://img.shields.io/github/issues/ZEISS/rectangly.svg)](https://github.com/ZEISS/rectangly/issues)\n\nA custom Angular 4+ renderer to use React for displaying the views. Ever wanted to use (most of) the React ecosystem in your Angular app? *rectangly* is here to help you out.\n\n## Hello World\n\nUsing *rectangly* is as simple as importing it via\n\n```sh\nnpm i rectangly\n```\n\nand applying the following changes to your application root module.\n\n```typescript\nimport { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { Rectangly } from 'rectangly';\nimport { MyPageComponent } from './mypage';\n\n@NgModule({\n  imports: [BrowserModule],\n  providers: [Rectangly],\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  declarations: [MyPageComponent],\n  bootstrap: [MyPageComponent],\n})\nexport class PageModule {}\n```\n\nIf you want to use some already created React components you should register them first:\n\n\n```typescript\nimport { registerComponents } from 'rectangly';\nimport { Button } from './mycomponents';\n\nregisterComponents('my', {\n  Button,\n});\n```\n\nUsing the this custom element in Angular templates is as simple as writing\n\n```html\n\u003cmy-Button [disabled]=\"true\" (onClick)=\"toggleDisabled()\"\u003eToggle me\u003c/my-Button\u003e\n```\n\nWhile standard attributes only supply strings to React, computed attributes (using the square brackets) will pass in the evaluated expression. Passing in functions should always be done via the listener attributes (using the round brackets).\n\n## Documentation\n\n(tbd)\n\n## Development\n\n### Installation\n\nFor installing the following command is required:\n\n```sh\nnpm install\n```\n\nThis will resolve and install all (development) dependencies.\n\n### Tests\n\nRunning the tests is as simple as typing:\n\n```sh\nnpm run test\n```\n\nThis will also run the linter. The standalone unit tests are available via `test:unit`. Likewise, we can also easily report the code coverage:\n\n```sh\nnpm run test:unit --coverage\n```\n\n## Contributing\n\nContributions are welcome and happily reviewed / accepted via pull requests. For more details read [CONTRIBUTING.md](CONTRIBUTING.md).\n\n## Changelog\n\nThis project adheres to [semantic versioning](https://semver.org).\n\nA changelog exists, which should be rather complete from a high-level point of view. See [CHANGELOG.md](CHANGELOG.md).\n\n## License\n\nMIT © [ZEISS Digital Innovation Partners](https://zeiss.com) see [LICENSE](LICENSE).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeiss%2Frectangly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeiss%2Frectangly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeiss%2Frectangly/lists"}