- Notifications
You must be signed in to change notification settings - Fork3
The easiest way to embed React components in Angular 1 apps.
License
alissaVrk/react2angular
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
The easiest way to embed React components in Angular 1 apps! (opposite ofangular2react)
this version can be used with React 18 and probably up
# Using Yarn:yarn add react2angular react react-dom prop-types# Or, using NPM:npm install react2angular react react-dom prop-types --save
import{Component}from"react";classMyComponentextendsComponent{render(){return(<div><p>FooBar:{this.props.fooBar}</p><p>Baz:{this.props.baz}</p></div>);}}
import{react2angular}from"react2angular";angular.module("myModule",[]).component("myComponent",react2angular(MyComponent,["fooBar","baz"]));
Note: If you definedpropTypes on your component, they will be used to compute component's bindings, and you can omit the 2nd argument:
....component('myComponent',react2angular(MyComponent))
IfpropTypes are defined and you passed in a 2nd argument, the argument will overridepropTypes.
<my-componentfoo-bar="3"baz="'baz'"></my-component>
Note: All React props are converted to AngularJS one-way bindings. If you are passing functions into your React component, they need to be passed as a function ref, rather than as an invokable expression. Keeping an existing AngularJS-style expression will result in infinite loops as the function re-evaluates on each digest loop.
It's easy to pass services/constants/etc. to your React component: just pass them in as the 3rd argument, and they will be available in your component's Props. For example:
import{Component}from"react";import{react2angular}from"react2angular";classMyComponentextendsComponent{state={data:"",};componentDidMount(){this.props.$http.get("/path").then((res)=>this.setState({data:res.data}));}render(){return(<div>{this.props.FOO}{this.state.data}</div>);}}angular.module("myModule",[]).constant("FOO","FOO!").component("myComponent",react2angular(MyComponent,[],["$http","FOO"]));
Note: If you have an injection that matches the name of a prop, then the value will be resolved with the injection, not the prop.
npmtestApache2
About
The easiest way to embed React components in Angular 1 apps.
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Languages
- TypeScript95.3%
- JavaScript4.7%