Utility classes that wraps React components and expose them as Aurelia components.
Install with
au install @dunite/au-react-wrapper
There is no plugin method to call. You need to inherit one of the wrapper classes for your component. Below code is a simple example on how to use the base classes.
import { customElement, inject } from 'aurelia-framework';
import { Label, ILabelProps } from 'office-ui-fabric-react/lib/Label';
import { AuReactStateWrapper } from '@dunite/au-office-ui/dist/commonjs/AuReactStateWrapper';
import { addPropertiesState } from '@dunite/au-office-ui/dist/commonjs/addPropertiesState';
let reactprops: ILabelProps = <ILabelProps>{};
reactprops.disabled = <any>{};
reactprops.className = <any>{};
reactprops.required = <any>{};
reactprops.htmlFor = <any>{};
@inject(Element)
@customElement('du-label')
export class DuLabel extends AuReactStateWrapper implements ILabelProps {
constructor(element) {
super(element);
this.hiddenIsHidden = true;
this.hiddenName = 'hidden';
}
hidden: boolean = false;
attached() {
this.renderReact(Label, this.createState(reactprops));
}
}
addProperties(DuLabel, reactprops);
- First you need customElement and inject from 'aurelia-framework'.
- Second you import the React class you want to wrap, in this case it is Label from 'office-ui-fabric-react/lib/Label'.
- Third and optional is to import the interface that the component expose, in this case ILabelProps.
- Fourth, you need one of the base classes from this library, in this case DuReactWrapperBaseClass.
- Fifth, you need addProperties function from this library.
The addProperties function second parameter is the reactprops object. All properties on the object will be exposed on the Aurelia Component and two-way bound to the property on the React Component. To make it simple, we use a same-name convention, so if the React component expose a className property, the addProperties function will add a 'className' property on your class and two-way bind it to the 'className' property on the React Component.
If the React component expose a callback funtion, typically onChange-event or similar, just add
reactprops.onClick = <any>onlyAureliaBound;
reactprops.onChange = (_this: any, onChangeTuple: any) => { _this['value'] = onChangeTuple[1]; };
Also note that the first argument of the event function is _this
that refers to your class, in this case DuLabel.
The second argument is the argument array from the callback, you have to check the documentation of the component you are wrapping.
The addProperties function will automatically add above propertis as a bindable function to your Aurelia component. For the onClick event it will check if you have bound the on-click property on your custom component to a function and if that is the case, call it. For the onChange event it will also first check if you have bound the property on your custom component to a function and if that is the case call it, otherwise it will call the function you provided above. You as a component developer can offer a default implementation if you expect that to be the most common scenario. And remember, even if you do, the consumer of the component can override it anyway with there bound function.
You must add the @inject and @customElement class decorators as above example. Just remeber to change 'du-label' to the element name you want do expose. In this case the element will be used with
<du-label></du-label>
Also just copy the constructor function from the example. This constructor is required for the AuReactStateWrapper and AuReactStateWrapperNoChildren. If the React class expose any property that hides or removes the component, add that property to the class, in this case
hidden: boolean = false;
Set the value for hiddenName to the name of the property that hides the element. In this case it is 'hidden', sometimes it is 'show' or 'display'. Also remeber to set the hiddenisHidden property. If the hiddenName property hides the element when set to true, them set hiddenIsHidden to true. If the hiddenName property displays the element when set to true, then set hiddenIsHidden to false.
You can optionally add the implements Interface keyword after the class if you need intellisens from TypeScript when you need to write code against your component. It does not at all change the functionality of your component at runtime.
Just copy the code from the example above. Remeber to change 'Label' to the React class you are wrapping. It was the class you imported at the beginning.
Just copy the code from the example. Remeber to change 'DuLabel' to the name of the class you just created. It is highly recommended to name the class according to Aurelia conventions, in this case DuLabel for the du-label element.
Then just use it as below
<du-label html-for="anInput">A Label for An Input</du-label>
<du-default-button checked="true" text.bind="mytextbutton" primary class-name="lisa" on-click.bind="buttonclick" ></du-default-button>
Demo site that uses au-react-wrapper for Office-UI-React components
This plugin exports AMD, CommonJS, ES2015, native and System modules.