https://github.com/truffls/react-in-angular
Use React components inside of AngularJS
https://github.com/truffls/react-in-angular
angular component react
Last synced: 2 months ago
JSON representation
Use React components inside of AngularJS
- Host: GitHub
- URL: https://github.com/truffls/react-in-angular
- Owner: truffls
- License: mit
- Created: 2017-05-28T14:36:16.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T03:55:07.000Z (about 2 years ago)
- Last Synced: 2024-04-13T23:53:53.353Z (about 1 year ago)
- Topics: angular, component, react
- Language: JavaScript
- Homepage:
- Size: 1.39 MB
- Stars: 10
- Watchers: 4
- Forks: 3
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-in-angular 
## Installation
```
npm install -S react-in-angular react react-dom
```
_Note: `react` and `react-dom` are peer dependencies and are needed to run `react-in-angular`_
## Usage
Create your React component:
```js
const ClickMeButton = (props) => {
return (
Click me!
)
};
export default ClickMeButton;
```
Wrap it with `react-in-angular` and register it as AngularJS component:
```js
import { toComponent } from 'react-in-angular';
import ClickMeButton from './ClickMeButton';
// Define the bindings for ClickMeButton
const bindings = {
type: '<',
onClick: '&'
};
angular
.module('app.button')
.component('clickMeButton', toComponent()(ClickMeButton, bindings));
```
In your angular controller:
```js
function Controller () {
this.type = 'button';
this.onClick = ($event) => {
$event.preventDefault();
alert('Clicked!');
};
}
```
In your angular template:
```html
```
### Supported bindings
Because of compatibility with React's one-way data flow only two bindings are supported:
* `<` – for data
* `&` – for functions
Internally all bindings of type `&` are handled like event handlers. Because of that all events which are passed to the event handlers will be wrapped in a scope where your event is accessible as `$event`. In Angular you can pass `$event` to your event handler:
```js
```
_Note: The property name `$event` was advised in [AngularJS Styleguide by Todd Motto](https://github.com/toddmotto/angularjs-styleguide#one-way-dataflow-and-events) and is described in the [documentation](https://docs.angularjs.org/guide/expression#-event-) of AngularJS._
### Decorators
With decorators you have the option to provide contexts for your React components or wrap it with logic which is provided by your AngularJS application.
#### How to write a decorators
Decorators are simple AngularJS factory functions which return a decorate function. The decorate function takes a render function as argument which will be used to render the actual component.
An example decorator called `ReduxDecorator` which reuses the Redux store of `$ngRedux`:
```js
import { Provider } from 'react-redux';
function ReduxDecorator ($ngRedux) {
return function decorate (render) {
return (
{render()}
);
};
}
export default ReduxDecorator;
```