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.
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.
Add the React component <ReactToAngularPortals />
to your DOM:
ReactDOM.render(<ReactToAngularPortals />, document.querySelector('#react-root'));
For a more information about ReactToAngularPortals click here.
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.
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.
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.
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.
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'),
);
}])
Licensed under MIT license, see LICENSE for the full license.