Showing posts with label react2angular. Show all posts
Showing posts with label react2angular. Show all posts
react2angular

react2angular

May 18, 2017

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

Installation


 npm install react2angular --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']))  
    
    Note: If you defined propTypes on your component, they will be used to compute component's bindings, and you can omit the 2nd argument:
     ...  
      .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
     <my-component  
      foo-bar="3"  
      baz="'baz'"  
     ></my-component>  
    


Tests


 npm test  


License


Apache2

             

Note: Special thanks to Opensource@Coatue

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developer.