react2angular

The easiest way to embed React components in Angular 1 apps! (opposite of angular2react)

Installation

npm install react2angular --save

Usage

1. Create a React component

import { Component } from 'react'

class MyComponent extends Component {
  static propTypes = {
    fooBar: React.PropTypes.number.isRequired,
    baz: React.PropTypes.string.isRequired
  }

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

2. Expose it to Angular

When propTypes are specified, they'll be used as the component's bindings, so it's no necessary to add them again.

import { react2angular } from 'react2angular'

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

As an alternative you can pass the bindings and they'll override the use of propTypes.

  // ...  
  .component('myComponent', react2angular(MyComponent, ['fooBar', 'baz']))

3. Use it in your Angular 1 code

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

Tests

npm test

License

Apache2

1.8 KiB Raw Blame History