react2angular
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.6 • Public • Published
    React to Angular: The easiest way to use React components in Angular 1

    react2angular Build Status NPM Apache2

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

    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']))

    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>

    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:

    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']))

    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

    npm test

    License

    Apache2

    Install

    npm i react2angular

    DownloadsWeekly Downloads

    36,166

    Version

    4.0.6

    License

    Apache-2.0

    Unpacked Size

    47.6 kB

    Total Files

    14

    Last publish

    Collaborators

    • albertywu
    • bcherny
    • khoomeister