angulareact

A way to seamlessly integrate React and AngularJS.

Great for projects slowly migrating from AngularJS to React, supports using React components in AngularJS and vice versa with full component functionality, bindings and existing angular services.

Installation

The package can be installed via npm:

npm install angulareact --save

Or via yarn:

yarn add angulareact

You will need AngularJS 1.5 or newer, and React 16.8 or newer.

Setup

Add the React component <ReactToAngularPortals /> to your DOM:

ReactDOM.render(<ReactToAngularPortals />, document.querySelector('#react-root'));

For a more information about ReactToAngularPortals click here.

Usage

reactToAngular

Convert a React component to AngularJS

The most basic use of the reactToAngular can be described with:

const SomeComponent = ({ firstName, onClick }) => {
    return <button onClick={onClick}>Greet {firstName}</button>;
};

angular.module('myModule').component(
    'someCompoennt',
    reactToAngular(SomeComponent, ['firstName', 'onClick'])
);

After the conversion you can use the component like so:

<some-component first-name="data.firstName" on-click="onClick"></some-component>

Note: All the bindings in the component will be of type <, which means that to pass a callback, you should pass its reference and not execute it in the prop.

For a more information about reactToAngular click here.

angularToReact

Converts an AngularJS component to React.

The most basic use of the angularToReact can be described with:

const SomeAngularComponent = angularToReact('some-angular-component', angular.module('myModule'));

const SomeComponent = ({ name }) => {
    return <SomeAngularComponent name={name} />;
};

For a more information about angularToReact click here.

useAngularService

A hook to get an AngularJS service.

The most basic use of the angularToReact can be described with:

const Greeting = ({ userId }) => {
    const [user, setUser] = useState([]);

    const $http = useAngularService('$http');

    useEffect(() => {
        $http.get(`user/${userId}`).then(response => setUsers(response.data));
    }, [userId])

    return (
        <strong>
            Hello, {user?.name || 'buddy'}!
        </strong>
    );
}

For a more information about useAngularService click here.

useAngularWatch

A hook used for watching on changes during digest cycles.

The most basic use of the angularToReact can be described with:

 const UsernameThatUpdates = () => {
    const userService = useAngularService("userService");
    const [username] = useAngularWatch(() => userService.currentUser.name);

    return (
        <strong>
            { username }
        </strong>
    );
};

For a more information about useAngularWatch click here.

Caveats

If you want to use one of the hooks or angularToReact in a component that is not a descendent of a component that was added using reactToAngular, you must wrap your React root with AngularInjectorContext and pass the AngularJS injector:

angular.module("myModule")
    .run(['$injector', ($injector) => {
        ReactDOM.render(
            <AngularInjectorContext.Provider value={$injector}>
                <YourReactRoot />
            </AngularInjectorContext>,
            document.querySelector('#react-root'),
        );
    }])

License

Licensed under MIT license, see LICENSE for the full license.