gem-hunter

react2angular

Installation

# 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

import { Component } from 'react'

class MyComponent extends Component {
  render() {
    return <div>
      <p>FooBar: {this.props.fooBar}</p>
      <p>Baz: {this.props.baz}</p>
    </div>
  }
}

2. Expose it to Angular

import { react2angular } from 'react2angular'

angular
  .module('myModule', [])
  .component('myComponent', react2angular(MyComponent, ['fooBar', 'baz']))

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

3. Use it in your Angular 1 code

<my-component
  foo-bar="3"
  baz="'baz'"
></my-component>

Dependency Injection

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 <div>
      { this.props.FOO }
      { this.state.data }
    </div>
  }
}

angular
  .module('myModule', [])
  .constant('FOO', 'FOO!')
  .component('myComponent', react2angular(MyComponent, [], ['$http', 'FOO']))

Tests

npm test

License