Naturally Processed Meals

    angular2-react

    0.0.1 • Public • Published

    Angular2-React

    Angular2 component used to embed react components

    Usage

    This assumes the user is using webpack/browserify tooling

    npm install angular2-react --save
    tsd install react react-dom --save
    

    Creating a react component (MyComponent.jsx):

    import React from "angular2-react/react";
    // More conveinent than `import * as React from "react"`
    
    export default class MyComponent extends React.Component<any, any> {
    		render() {
    				const {name} = this.props;
    				return <div>Hi {name}, this is a react component and my props is {JSON.stringify(this.props)}</div>;
    		}
    }
    

    Using the react component (app.ts):

    import {Component} from 'angular2/core';
    import {ReactComponent} from 'angular2-react/component';
    import MyComponent from './MyComponent';
    
    @Component({
    	selector: 'my-app',
    	template: '<h1>My First Angular App</h1><react-component [component]="embedComponent" [props]="embedComponentProps"></react-component>',
    	directives: [ReactComponent]
    })
    export class AppComponent {
    	embedComponent = MyComponent;
    	embedComponentProps = {
    		"name": "person"
    	};
    }
    

    Usage without webpack

    See usage example without webpack tooling here

    Install

    npm i angular2-react

    DownloadsWeekly Downloads

    12

    Version

    0.0.1

    License

    MIT

    Last publish

    Collaborators

    • looklikeapro