rAdapter

rAdapter is a React component adapter for Angularjs applications. Aimed at providing a way to avoid rewriting legacy Angularjs applications upfront, and instead allows iterative replacement of Angular directives and components with React components.

Usage

Installation:

npm install radapter

Example:

    import radapter from 'radapter';
    import { MyTextBox, MyButton } from './my-react-components';

    // your application
    angular
        .module('my-cool-app', [])
        .constant('MY_CONSTANTS', { assetPath: 'www.google.com' })
        .component('myTextBox', radapter(MyTextBox)) // Registered as component
        .directive('myButton', () => radapter(MyButton)); // Registered as directive
        .directive('myImage', (MY_CONSTANTS) => radapter(MyImage, {
            defaultProps: { assetPath: MY_CONSTANTS.assetPath } // Injecting dependencies from Angular
        }));

    // In your templates
    <my-text-box
        class-name="textbox"
        type="text">
    </my-text-box>

    <my-button
        type="button"
        onClick="$ctrl.handleClick">
    </my-button>

API

radapter(Component, options)

A factory function that accepts a React component, infers bindings from propTypes (or manualProps) and returns an Angularjs directive. The directive returned is also interoperable with Angular components.

Component

type: React component

React component to be wrapped

options.manualProps

type: string[]

If the manualProps array is supplied to the factory, it will bypass inference of bindings via Component.propTypes in favour of the supplied manual props. This is useful if your component is written in TypeScript or does not rely on PropTypes.

options.defaultProps

type: object

defaultProps allow you to pass predefined variables into your component. This is a good place to pass in Angular dependencies.