Repository files navigation

Reactular allows you to use React components in AngularJS (Angular 1.x). It began as a fork ofreact2angular. See thecomparison below for differences.

# Using NPM:npm install @vendhq/reactular react react-dom# Or, using Yarn:yarn add @vendhq/reactular react react-dom

Basic usage looks like this:

importangularfrom'angular';importReactfrom'react';constHelloComponent=()=>{return<span>Hello, world!</span>;}angular.module('myModule',[]).component('helloComponent',reactular(HelloComponent));

If you need to pass props to your React component, you must specify them in the call toreactular:

importangularfrom'angular';importReactfrom'react';constHelloComponent=(name)=>{return<span>Hello, world!</span>;}angular.module('myModule',[]).component('helloComponent',reactular(HelloComponent),['name']);

The optional third parameter passed to reactular may specify a wrapping React component, either directly as a class or functional component, or as a string which is resolved into a component through AngularJS's$injector. Most commonly the wrapper component is used to provide context to React components.

Basic wrapper usage might look like this:

importangularfrom'angular';importReactfrom'react';constMyContext=React.createContext();constwrapper=({ children})=><MyContext.Providervalue="world">{children}</MyContext.Provider>;constHelloComponent=()=>{constvalue=React.useContext(MyContext);return<span>Hello,{value}!</span>;}angular.module('myModule',[]).component('helloComponent',reactular(HelloComponent,[],wrapper));

You could use this functionality to ensure that every React component has access to something, such as a Redux store or an Apollo client.

Using an AngularJS injectable as the wrapper, it's possible to give your React components access to AngularJS injectables. You can also wrap up this logic in a custom hook.

importangularfrom'angular';importReactfrom'react';constMyContext=React.createContext();constuseFilter=()=>React.useContext(MyContext)constHelloComponent=()=>{// Get AngularJS's $filter through the context.const$filter=useFilter();constuppercase=$filter('uppercase');return<span>Hello,{uppercase('world')}!</span>;}angular.module('myModule',[]).factory('reactWrapper',$filter=>{return({ children})=><MyContext.Providervalue={$filter}>{children}</MyContext.Provider>;}).component('helloComponent',reactular(HelloComponent,[],'reactWrapper'));

Transclusion is not supported. It could be added in the future, given a reasonable use case and implementation proposal.

It may be possible to work around this limitation in some cases. If you have a React component and you wish to "transclude" other React components, you might be able to create another component that does all the transclusion on the React side. For example, imagine that we have a componentParent and two other components,Child1 andChild2 that we want to transclude:

constComponentWithTransclusion=()=>(<Parent><Child1/><Child2/></Parent>)angular.component('componentWithTransclusion',reactular(ComponentWithTransclusion));

If the components you want to transclude exist on the AngularJS side, you could look at wrapping them with something likeangular2react to make them available on the React side. This starts to become pretty complicated pretty fast, however.

Only expression AngularJS binding (<) is supported. There is probably not any reasonable way to introduce support for two-way binding.

Basic usage and behavior of Reactular is similar to react2angular, but it differs in a few ways.

react2angular does a shallow prop check every time the AngularJS$onChanges method is called and only re-renders the React component when it detects a change. (Seecoatue-oss/react2angular#93.)

Reactular re-renders the React component every time$onChanges is called. You may wrap your component withReact.memo to get behavior similar to react2angular.

Reactular does not directly support injecting AngularJS dependencies through props the way react2angular does. Instead, if you need to access AngularJS dependencies, do it throughwrapper components and React context. This makes it easier to use the same components from both AngularJS and React.

Reactular does not have any special support for prop types. Prop names must always be passed to thereactular function.