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 |