GithubHelp home page GithubHelp logo

jamesz / react2angular Goto Github PK

View Code? Open in Web Editor NEW

This project forked from coatue-oss/react2angular

0.0 1.0 0.0 633 KB

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

License: Other

TypeScript 95.39% JavaScript 4.61%

react2angular's Introduction

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)


# Using Yarn:
yarn add react2angular react react-dom prop-types

# Or, using NPM:
npm install react2angular react react-dom prop-types --save


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>

2. Expose it to Angular

import { react2angular } from 'react2angular'

  .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


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: })
  render() {
    return <div>
      { this.props.FOO }
      { }

  .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.


npm test



react2angular's People


arai-a avatar bcherny avatar capaj avatar erezy avatar fand avatar greenkeeper[bot] avatar jamesz avatar lukeggchapman avatar moshfeu avatar mribichich avatar rkomiyama avatar texonidas avatar ttsahi avatar



Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.