@zapteccharger/react2angular

A fork of react2angular adding support for child components, and browser-friendly builds.

This repo is configured to build an NPM package and deploy it to the GitHub NPM registry. To use the package as a dependency you will need to:

• Acquire a GitHub PAT. The only permission you need to grant is read:packages.

• Crete a .nvmrc file in your project with these contents:

  //npm.pkg.github.com/:_authToken=${ZAPTEC_GITHUB_TOKEN}
  @zapteccharger:registry=https://npm.pkg.github.com/
  

• Assign the PAT to the ZAPTEC_GITHUB_TOKEN environment variable:

  • Mac/Linux: add the line export ZAPTEC_GITHUB_TOKEN=<PAT> to ~/.bash_profile and restart the terminal
  • Windows: Run setx ZAPTEC_GITHUB_TOKEN <PAT> /m and restart the terminal

You can then add a dependency to @zapteccharger/react2angular via Yarn or NPM.

Below is the original README as found upstream:

react2angular

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>

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:

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