https://github.com/coatue-oss/react2angular

The easiest way to embed React components in Angular 1 apps.
https://github.com/coatue-oss/react2angular

angular angular1 react reactjs

Last synced: 1 day ago
JSON representation

The easiest way to embed React components in Angular 1 apps.

• Host: GitHub
• URL: https://github.com/coatue-oss/react2angular
• Owner: coatue-oss
• License: other
• Created: 2017-02-25T01:43:20.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2023-02-10T07:30:43.000Z (almost 2 years ago)
• Last Synced: 2024-10-29T17:14:03.577Z (2 months ago)
• Topics: angular, angular1, react, reactjs
• Language: TypeScript
• Homepage:
• Size: 576 KB
• Stars: 546
• Watchers: 15
• Forks: 109
• Open Issues: 44
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

• awesome - react2angular - The easiest way to embed React components in Angular 1 apps. (TypeScript)

README

        


# 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)

> The easiest way to embed React components in Angular 1 apps! (opposite of [angular2react](https://github.com/coatue-oss/angular2react))

## Installation

```sh

# Using Yarn:

yarn add react2angular react react-dom prop-types

# Or, using NPM:

npm install react2angular react react-dom prop-types --save

```

## Usage

### 1. Create a React component

```js

import { Component } from 'react'

class MyComponent extends Component {

  render() {

    return 


      
FooBar: {this.props.fooBar}

      
Baz: {this.props.baz}

    

  }

}

```


### 2. Expose it to Angular

```js

import { react2angular } from 'react2angular'

angular

  .module('myModule', [])

  .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:

```js

...

  .component('myComponent', react2angular(MyComponent))

```

If `propTypes` are defined and you passed in a 2nd argument, the argument will override `propTypes`.

### 3. Use it in your Angular 1 code

```html

```

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.

## Dependency Injection

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

import { Component } from 'react'

import { react2angular } from 'react2angular'

class MyComponent extends Component {

  state = {

    data: ''

  }

  componentDidMount() {

    this.props.$http.get('/path').then(res =>

      this.setState({ data: res.data })

    )

  }

  render() {

    return 


      { this.props.FOO }

      { this.state.data }

    

  }

}


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.

## Tests

```sh

npm test

```

## License

Apache2