Ej1 api migration in React Button component

30 Jan 20235 minutes to read

This article describes the API migration process of Button component from Essential JS 1 to Essential JS 2.

Properties

Behavior API in Essential JS 1 API in Essential JS 2
Specifies the text of the button Property: text

<EJ.Button id="btn" text="Button"></EJ.Button> 		Property: content

<ButtonComponent id="btn" content="Button"></ButtonComponent>
Specifies the content type of the button Property: ContentType

<EJ.Button id="btn" text="Save" contentType="textandimage" prefixIcon="e-icon e-save"></EJ.Button> 		Not applicable
Specifies icon for the button Property: prefixIcon

<EJ.Button id="btn" contentType="imageonly" prefixIcon="e-icon e-save"></EJ.Button> 		Property: iconCss

<ButtonComponent id="btn" iconCss="e-icons e-save"></ButtonComponent>
Positioning icon in the button Property: imagePosition

<EJ.Button id="btn" contentType="textandimage" text="Save" prefixIcon="e-icon e-save" imagePosition="imageright"></EJ.Button> 		Property: iconPosition

<ButtonComponent id="btn" content="Save" iconCss="e-icons e-save" iconPosition="Right"></ButtonComponent>
Specifies secondary icon for the button Property: suffixIcon

<EJ.Button id="btn" text="FileSearch" contentType="imagetextimage" prefixIcon="e-icon e-search" suffixIcon="e-icon e-file-html"></EJ.Button> 		Not applicable
Adding custom class Property: cssClass

<EJ.Button id="btn" text="Button" cssClass="custom-class"></EJ.Button> 		Property: cssClass

<ButtonComponent id="btn" cssClass="custom-class" content="Button"></ButtonComponent>
Specifies the size of the button Property: size

<EJ.Button id="btn" text="Button" size="small"></EJ.Button> 		Property: cssClass

<ButtonComponent id="btn" cssClass="e-small" content="Button"></ButtonComponent>
Triggers click event repeatedly while pressing the button Property: repeatButton

<EJ.Button id="btn" text="Click" repeatButton={true}></EJ.Button> 		Not applicable
Sets time interval between two consecutive click event on the repeat button Property: timeInterval

<EJ.Button id="btn" text="Click" repeatButton={true} timeInterval="100"></EJ.Button> 		Not applicable
Specifies the type of the button Property: type

<EJ.Button id="btn" text="Submit" buttonType="submit"></EJ.Button> 		Not applicable
Changes normal button into rounded corner Property: showRoundedCorner

<EJ.Button id="btn" text="Button" showRoundedCorner={true}></EJ.Button> 		Not applicable
Specifies the width of the button Property: width

<EJ.Button id="btn" text="Button" width="150px"></EJ.Button> 		Not applicable
Specifies the height of the button Property: height

<EJ.Button id="btn" text="Button" height="50px"></EJ.Button> 		Not applicable
Adds HTML attributes to the button Property: htmlAttributes

var attributes = { disabled: “disabled” };
<EJ.Button id="btn" text="Button" htmlAttributes={attributes}></EJ.Button> 		Not applicable
Allows the appearance of the Button to be enhanced and visually appealing Not applicable Property: isPrimary

<ButtonComponent id="btn" isPrimary={true} content="Button"></ButtonComponent>
Makes the button toggle from normal to active state Property: isToggle

Not applicable		 Property: isToggle

<ButtonComponent id="btn" isToggle={true} content="Play"></ButtonComponent>
Specifies the disabled state of the button Property: enabled

<EJ.Button id="btn" text="Button" enabled={false}></EJ.Button> 		Property: disabled

<ButtonComponent id="btn" disabled={true} content="Button"></ButtonComponent>
Enable or disable rendering component in right to left direction Property: enableRTL

<EJ.Button id="btn" contentType="textandimage" text="Save" prefixIcon="e-icon e-save" enableRTL={true}></EJ.Button> 		Property: enableRtl

<ButtonComponent id="btn" enableRtl={true} content="Save" iconCss="e-icons e-save"></ButtonComponent>

Methods

Behavior API in Essential JS 1 API in Essential JS 2
Destroys the control Methods: destroy

<EJ.Button id="btn" text="Button"></EJ.Button>
var btnObj = $(‘#btn’).ejButton(‘instance’);
btnObj.destroy();		 Methods: destroy

<ButtonComponent id="btn" content="Button" ref={(scope) => {this.btnObj = scope}></ButtonComponent>
constructor(props: {}) {
  this.btnObj.destroy();
}
Disables the button Methods: disable

<EJ.Button id="btn" text="Button"></EJ.Button>
var btnObj = $(‘#btn’).ejButton(‘instance’);
btnObj.disable();		 Not applicable
Enables the button Methods: enable

<EJ.Button id="btn" text="Button"></EJ.Button>
var btnObj = $(‘#btn’).ejButton(‘instance’);
btnObj.enable();		 Not applicable

Events

Behavior API in Essential JS 1 API in Essential JS 2
Triggers while clicking the button Events: click

<EJ.Button id="btn" text="Button" click={btnClick}></EJ.Button>
function btnClick(args) {
/** code block */
}		 Not applicable
Triggers once the component rendering is completed Events: create

<EJ.Button id="btn" text="Button" click={create}></EJ.Button>
function create(args) {
/** code block */
}		 Events: created

<ButtonComponent id="btn" content="Button" created={this.created.bind(this)}></ButtonComponent>
created() {
/** code block */
}
Triggers once the component is destroyed Events: destroy

<EJ.Button id="btn" text="Button" destroy={destroy}></EJ.Button>
function destroy(args) {
/** code block */
}		 Not applicable