invisi/react2angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change readme

Browse Source
This commit is contained in:
Alissa
2023-01-06 09:08:15 +02:00
parent 1c3e7472a3
commit 375630964d
1 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+30 -27
View File
@@ -1,9 +1,11 @@
<img alt="React to Angular: The easiest way to use React components in Angular 1" src="https://raw.githubusercontent.com/coatue-oss/react2angular/master/logo.png" width="400px" /> <img alt="React to Angular: The easiest way to use React components in Angular 1" src="https://raw.githubusercontent.com/coatue-oss/react2angular/master/logo.png" width="400px" />
# react2angular [![Build Status](https://img.shields.io/circleci/project/coatue-oss/react2angular.svg?branch=master&style=flat-square)](https://circleci.com/gh/coatue-oss/react2angular) [![NPM](https://img.shields.io/npm/v/react2angular.svg?style=flat-square)](https://www.npmjs.com/package/react2angular) [![Apache2](https://img.shields.io/npm/l/react2angular.svg?style=flat-square)](https://opensource.org/licenses/Apache2) # react2angular [![NPM](https://img.shields.io/npm/v/react18-react2angular.svg?style=flat-square)](https://www.npmjs.com/package/react18-react2angular) [![Apache2](https://img.shields.io/npm/l/react2angular.svg?style=flat-square)](https://opensource.org/licenses/Apache2)
> The easiest way to embed React components in Angular 1 apps! (opposite of [angular2react](https://github.com/coatue-oss/angular2react)) > The easiest way to embed React components in Angular 1 apps! (opposite of [angular2react](https://github.com/coatue-oss/angular2react))
> <b>this version can be used with React 18 and probably up</b>
## Installation ## Installation
```sh ```sh
@@ -19,14 +21,16 @@ npm install react2angular react react-dom prop-types --save
### 1. Create a React component ### 1. Create a React component
```js ```js
import { Component } from 'react' import { Component } from "react";
class MyComponent extends Component { class MyComponent extends Component {
render() { render() {
return <div> return (
<p>FooBar: {this.props.fooBar}</p> <div>
<p>Baz: {this.props.baz}</p> <p>FooBar: {this.props.fooBar}</p>
</div> <p>Baz: {this.props.baz}</p>
</div>
);
} }
} }
``` ```
@@ -34,11 +38,11 @@ class MyComponent extends Component {
### 2. Expose it to Angular ### 2. Expose it to Angular
```js ```js
import { react2angular } from 'react2angular' import { react2angular } from "react2angular";
angular angular
.module('myModule', []) .module("myModule", [])
.component('myComponent', react2angular(MyComponent, ['fooBar', 'baz'])) .component("myComponent", react2angular(MyComponent, ["fooBar", "baz"]));
``` ```
Note: If you defined [`propTypes`](https://facebook.github.io/react/docs/typechecking-with-proptypes.html) on your component, they will be used to compute component's bindings, and you can omit the 2nd argument: Note: If you defined [`propTypes`](https://facebook.github.io/react/docs/typechecking-with-proptypes.html) on your component, they will be used to compute component's bindings, and you can omit the 2nd argument:
@@ -53,10 +57,7 @@ If `propTypes` are defined and you passed in a 2nd argument, the argument will o
### 3. Use it in your Angular 1 code ### 3. Use it in your Angular 1 code
```html ```html
<my-component <my-component foo-bar="3" baz="'baz'"></my-component>
foo-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. 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.
@@ -66,30 +67,32 @@ Note: All React props are converted to AngularJS one-way bindings. If you are pa
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: 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:
```js ```js
import { Component } from 'react' import { Component } from "react";
import { react2angular } from 'react2angular' import { react2angular } from "react2angular";
class MyComponent extends Component { class MyComponent extends Component {
state = { state = {
data: '' data: "",
} };
componentDidMount() { componentDidMount() {
this.props.$http.get('/path').then(res => this.props.$http
this.setState({ data: res.data }) .get("/path")
) .then((res) => this.setState({ data: res.data }));
} }
render() { render() {
return <div> return (
{ this.props.FOO } <div>
{ this.state.data } {this.props.FOO}
</div> {this.state.data}
</div>
);
} }
} }
angular angular
.module('myModule', []) .module("myModule", [])
.constant('FOO', 'FOO!') .constant("FOO", "FOO!")
.component('myComponent', react2angular(MyComponent, [], ['$http', '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. 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.