Use React components inside Angular
Перейти к файлу
Ben Grynhaus 96753d2990
fix all docs tests and run tests in CI (#100)
- Fix the `docs` project's tests and align their components with more modern standards in the repo.
- Run tests in CI
2019-03-17 17:40:54 +02:00
.circleci fix all docs tests and run tests in CI (#100) 2019-03-17 17:40:54 +02:00
.github add stale-bot configuration (#82) 2019-01-26 20:39:53 +02:00
.vscode [Fabric] Add Dropdown component (#63) 2018-12-24 17:57:28 +02:00
apps fix all docs tests and run tests in CI (#100) 2019-03-17 17:40:54 +02:00
docs Update to fix after github move. 2018-08-10 15:17:01 -07:00
libs fix all docs tests and run tests in CI (#100) 2019-03-17 17:40:54 +02:00
test fix all docs tests and run tests in CI (#100) 2019-03-17 17:40:54 +02:00
tools Upgrade all dependencies- Angular 6.1- TypeScript 2.9.2- office-ui-fabric-react 6.43.0 2018-08-02 11:16:43 +03:00
.editorconfig chore: initial commit from @angular/cli 2018-04-03 20:24:44 -07:00
.gitignore Removed ignoring docs in git (used for GitHub pages) 2018-08-02 18:56:19 +03:00
.prettierrc prettier formatting 2018-07-13 16:28:03 +03:00
CHANGELOG.md 0.6.0 (#97) 2019-03-08 02:13:38 +02:00
CODE_OF_CONDUCT.md Package upgrades, Prettier alignment (#38) 2018-12-01 21:25:27 +02:00
CONTRIBUTING.md Package upgrades, Prettier alignment (#38) 2018-12-01 21:25:27 +02:00
LICENSE Update to docs. 2018-08-16 11:23:31 -07:00
README.md Add CircleCI build badge 2019-01-16 22:19:10 +02:00
angular.json remove non-maintained projects 2018-08-02 11:16:46 +03:00
nx.json Update to license/copyright on each lib file. Lint fixes. 2018-08-16 12:17:03 -07:00
package-lock.json [Fabric] upgrade office-ui-fabric-react (#96) 2019-03-06 10:50:42 +02:00
package.json fix all docs tests and run tests in CI (#100) 2019-03-17 17:40:54 +02:00
tsconfig.json Added `skipLibCheck: true` to root tsconfig.json. 2018-10-16 00:23:30 +03:00
tsconfig.packages.json [Panel] WIP 2018-06-28 19:39:44 +03:00
tslint.json Package upgrades, Prettier alignment (#38) 2018-12-01 21:25:27 +02:00
yarn.lock Package upgrades, Prettier alignment (#38) 2018-12-01 21:25:27 +02:00

README.md

React support for Angular

npm version CircleCI

Industry trends, organizational pressures, and other factors can lead to mandates regarding the use of component libraries or migration from one technology to another. In the case of Office UI Fabric, where its use is required, the client must be written in React (there is no Angular component library for the latest version). Rewrite from Angular to React may be cost-prohibitive or ill advised for other reasons.

Use of Angular-React allows consuming any React elements, but specifically Office UI Fabric, within an Angular [2+] application. The library of wrappers for Office UI Fabric simplifies the use of these components with Angular. However, any React code can make use of the custom Angular-React renderer.

@angular-react/fabric | Documentation, quick start, and guides | Demo | Contributing | StackBlitz Template | Office UI Fabric

Typical Use Cases

  • Use React component libraries with Angular
  • Incrementally rewrite an Angular application into React (moving from atomic/leaf nodes upward into full features/pages until the entire app is re-written)

Libraries

  • core: Includes the Renderer and supporting logic to render Angular components with React implementations as React components.
  • fabric: The light-weight Angular component wrappers that expose the Fabric React component API through common Angular components (including both imperative AND declarative syntax in many cases).

Roadmap

Initial work to prove the feasibility of adapting the Angular Renderer to output React managed components has concluded. We have moved beyond the initial simple Fabric components and expanded coverage to much of the available Office UI Fabric component library.

In the coming months we will continue to refine the component implementations as we use the angular-react core and fabric libraries in 2 real-world consumer facing production applications.

Getting started

See our Getting Started Guide if you're building your first project with Angular-React.

If you'd like to contribute, you must follow our contributing guidelines. You can look through the issues (which should be up-to-date on who is working on which features and which pieces are blocked) and make a comment.