# @capaj/react2angular

> The easiest way to embed React components in Angular 1 apps!

Latest version **1.1.5** (published 2017-08-24) · Apache2 license · 0 weekly downloads

## Install

```sh
npm install @capaj/react2angular
pnpm add @capaj/react2angular
yarn add @capaj/react2angular
bun add @capaj/react2angular
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2017-08-24 |
| First published | 2017-08-24 |
| Weekly downloads | 0 |
| License | Apache2 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 9 |
| Known vulnerabilities | 0 (+10 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 543 |
| Author | Boris Cherny |
| Maintainers | capaj |

## Links

- npm: https://www.npmjs.com/package/@capaj/react2angular
- Repository: https://github.com/coatue-oss/react2angular
- Homepage: https://github.com/coatue-oss/react2angular#readme
- Issues: https://github.com/coatue-oss/react2angular/issues
- npm.io page: https://npm.io/package/@capaj/react2angular

## Dependencies (9)

- [react](https://npm.io/package/react.md) ^16.0.0-beta.5
- [angular](https://npm.io/package/angular.md) >=1.6.5
- [react-dom](https://npm.io/package/react-dom.md) ^16.0.0-beta.5
- [ngcomponent](https://npm.io/package/ngcomponent.md) ^3.0.2
- [@types/react](https://npm.io/package/@types/react.md) ^16.0.0
- [@types/angular](https://npm.io/package/@types/angular.md) ^1.6.28
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^15.5.1
- [lodash.frompairs](https://npm.io/package/lodash.frompairs.md) ^4.0.1
- [@types/lodash.frompairs](https://npm.io/package/@types/lodash.frompairs.md) ^4.0.2

## Recent versions

- 1.1.5 (latest) — 2017-08-24

## README

<img alt="React to Angular: The easiest way to use React components in Angular 1" src="https://raw.githubusercontent.com/coatue-oss/react2angular/master/logo.png" width="400px" />

# react2angular [![Build Status](https://img.shields.io/circleci/project/coatue-oss/react2angular.svg?branch=master&style=flat-square)](https://circleci.com/gh/coatue-oss/react2angular) [![NPM](https://img.shields.io/npm/v/react2angular.svg?style=flat-square)](https://www.npmjs.com/package/react2angular) [![Apache2](https://img.shields.io/npm/l/react2angular.svg?style=flat-square)](https://opensource.org/licenses/Apache2)

> The easiest way to embed React components in Angular 1 apps! (opposite of [angular2react](https://github.com/coatue-oss/angular2react))

## Installation

```sh
npm install react2angular --save
```

## Usage

### 1. Create a React component

```js
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

```js
import { react2angular } from 'react2angular'

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

Note: If you defined [`propTypes`](https://facebook.github.io/react/docs/typechecking-with-proptypes.html) on your component, they will be used to compute component's bindings, and you can omit the 2nd argument:

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

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

## Tests

```sh
npm test
```

## License

Apache2

---
_Source: https://npm.io/package/@capaj/react2angular · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._