Ej1 api migration in React Color picker component

10 Mar 202511 minutes to read

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

Properties

Behavior API in Essential® JS 1 API in Essential® JS 2
Default property: value

<EJ.ColorPicker id="colorpicker" value="#278787"></EJ.ColorPicker> 		property: value

<ColorPickerComponent id="colorpicker" value="#278787"></ColorPickerComponent>
Inline mode color picker property: displayInline

<EJ.ColorPicker id="colorpicker" displayInline={true}></EJ.ColorPicker> 		property: inline

<ColorPickerComponent id="colorpicker" inline={true}></ColorPickerComponent>
Adding custom class property: cssClass

<EJ.ColorPicker id="colorpicker" cssClass ="custom-class"></EJ.ColorPicker> 		property: cssClass

<ColorPickerComponent id="colorpicker" cssClass="custom-class"></ColorPickerComponent>
Disable the ColorPicker component property: enabled

<EJ.ColorPicker id="colorpicker" enabled={false}></EJ.ColorPicker> 		property: disabled

<ColorPickerComponent id="colorpicker" disabled={true}></ColorPickerComponent>
To display custom text in button elements property: buttonText

var buttonText = { apply: “Apply”, cancel: “Cancel”, swatches: “Swatches” };
<EJ.ColorPicker id="colorpicker" buttonText={buttonText}></EJ.ColorPicker> 		Not Applicable
To display customized text or content when mouse over the color picker elements property: tooltipText

var tooltipText = { switcher: “Switch”, currentColor: “New Color”, selectedColor: “Old Color” };
<EJ.ColorPicker id="colorpicker" tooltipText={tooltipText}></EJ.ColorPicker> 		Not Applicable
Disable / hide opacity property: enableOpacity

<EJ.ColorPicker id="colorpicker" enableOpacity={false}></EJ.ColorPicker> 		property: enableOpacity

<ColorPickerComponent id="colorpicker" enableOpacity={false}></ColorPickerComponent>
ColorPicker Button mode property: buttonMode

<EJ.ColorPicker id="colorpicker" buttonMode="Dropdown"></EJ.ColorPicker> 		Not Applicable
To show / hide the control (apply / cancel) buttons property: showApplyCancel

<EJ.ColorPicker id="colorpicker" showApplyCancel={false}></EJ.ColorPicker> 		property: showButtons

<ColorPickerComponent id="colorpicker" showButtons={false}></ColorPickerComponent>
To show / hide the clear button property: showClearButton

<EJ.ColorPicker id="colorpicker" showClearButton={false}></EJ.ColorPicker> 		Not Applicable
Show / hide the mode (picker / palette) switcher property: showSwitcher

<EJ.ColorPicker id="colorpicker" showSwitcher={false}></EJ.ColorPicker> 		property: modeSwitcher

<ColorPickerComponent id="colorpicker" modeSwitcher={false}></ColorPickerComponent>
To show / hide the preview area property: showPreview

<EJ.ColorPicker id="colorpicker" showPreview={false}></EJ.ColorPicker> 		Not Applicable
To show / hide the recent selected color list property: showRecentColors

<EJ.ColorPicker id="colorpicker" showRecentColors={true}></EJ.ColorPicker> 		Not Applicable
To show / hide the color picker Slider tooltip property: showTooltip

<EJ.ColorPicker id="colorpicker" showTooltip={false}></EJ.ColorPicker> 		Not Applicable
Custom icon in dropdown control color area property: toolIcon

<EJ.ColorPicker id="colorpicker" toolIcon="e-font-icon"></EJ.ColorPicker> 		Not Applicable
ColorPicker mode property: modelType

<EJ.ColorPicker id="colorpicker" modelType="Picker"></EJ.ColorPicker> 		property: mode

<ColorPickerComponent id="colorpicker" mode="Palette"></ColorPickerComponent>
Opacity value property: opacityValue

<EJ.ColorPicker id="colorpicker" opacityValue={80}></EJ.ColorPicker> 		Not Applicable
Number of columns in color palette property: columns

<EJ.ColorPicker id="colorpicker" columns={10}></EJ.ColorPicker> 		property: columns

<ColorPickerComponent id="colorpicker" columns={15}></ColorPickerComponent>
Custom colors property: palette

var colors = { “ffffff”, “ffccff”, “ff99ff”, “ff66ff”, “ff33ff”, “ff00ff”, “ccffff”, “ccccff”, “cc99ff”, “cc66ff”, “cc33ff”, “cc00ff”, “99ffff”, “99ccff”, “9999ff”, “9966ff”, “9933ff”, “9900ff”, “ffffcc”, “ffcccc” };
<EJ.ColorPicker id="colorpicker" palette="CustomPalette" modelType ="Palette" custom={colors}></EJ.ColorPicker> 		property: presetColors

constructor(props: {}) {
  this.colors = {
    ‘custom’: [ “ffffff”, “ffccff”, “ff99ff”, “ff66ff”, “ff33ff”, “ff00ff”, “ccffff”, “ccccff”, “cc99ff”, “cc66ff”, “cc33ff”, “cc00ff”, “99ffff”, “99ccff”, “9999ff”, “9966ff”, “9933ff”, “9900ff”, “ffffcc”, “ffcccc” ]};
}
<ColorPickerComponent id="colorpicker" presetColors={this.colors}></ColorPickerComponent>
Rendering palette from the predefined set of palettes property: presetType

<EJ.ColorPicker id="colorpicker" modelType="Palette" presetType="FlatColors"></EJ.ColorPicker> 		Not Applicable
No color option in color palette Not Applicable property: noColor

<ColorPickerComponent id="colorpicker" noColor={true} modeSwitcher={false} mode="Palette"></ColorPickerComponent>
Localization property: locale

ej.ColorPicker.Locale[“zh-CN”] = {
  buttonText: {
    apply: “应用”,
    cancel: “取消”,
    swatches: “色板”
  },
  tooltipText: {
    switcher: “切换器,
    addButton: “添加颜色”,
    basic: “基本”
  }
}
<EJ.ColorPicker id="colorpicker" locale="zh-CN"></EJ.ColorPicker> 		property: locale

L10n.load({
  ‘ar’: {
    “colorpicker”: {
      “Apply”:”تطبيق”,
      “Cancel”:”إلغاء”,
      “ModeSwitcher”: “مفتاح كهربائي الوضع”
    }
  }
});
<ColorPickerComponent id="colorpicker" locale="ar"></ColorPickerComponent>
Right to left property: enableRTL

<EJ.ColorPicker id="colorpicker" enableRTL={true}></EJ.ColorPicker> 		property: enableRtl

<ColorPickerComponent id="colorpicker" enableRtl={true}></ColorPickerComponent>

Methods

Behavior API in Essential® JS 1 API in Essential® JS 2
Method to open color picker popup Method: show

<EJ.ColorPicker id="colorpicker"></EJ.ColorPicker>
var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’);
colorPickerObj.show();		 Method: toggle

<ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent>
constructor(props: {}) {
  this.colorPickerObj.toggle();
}
Method to close color picker popup Method: hide

<EJ.ColorPicker id="colorpicker"></EJ.ColorPicker>
var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’);
colorPickerObj.hide();		 Method: toggle

<ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent>
constructor(props: {}) {
  this.colorPickerObj.toggle();
}
Enable the color picker control Method: enable

<EJ.ColorPicker id="colorpicker"></EJ.ColorPicker>
var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’);
colorPickerObj.enable();		 Not Applicable
Disables the color picker control Method: disable

<EJ.ColorPicker id="colorpicker"></EJ.ColorPicker>
var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’);
colorPickerObj.disable();		 Not Applicable
Method returns the selected color value as hex code Method: getValue

<EJ.ColorPicker id="colorpicker"></EJ.ColorPicker>
var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’);
colorPickerObj.getValue();		 Method: getValue

<ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent>
constructor(props: {}) {
  this.colorPickerObj.getValue();
}
Method returns the selected color value in RGB format Method: getColor

<EJ.ColorPicker id="colorpicker"></EJ.ColorPicker>
var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’);
colorPickerObj.getColor();		 Method: getValue

<ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent>
constructor(props: {}) {
  this.colorPickerObj.getValue(null, ‘RGB’);
}
Method convert the color value from hexCode to RGB Method: hexCodeToRGB

<EJ.ColorPicker id="colorpicker"></EJ.ColorPicker>
var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’);
colorPickerObj.hexCodeToRGB(“#278787”);		 Method: getValue

<ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent>
constructor(props: {}) {
  this.colorPickerObj.getValue(“#278787”, ‘RGB’);
}
Method convert the color value from RGB to Hex code Method: RGBToHEX

<EJ.ColorPicker id="colorpicker"></EJ.ColorPicker>
var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’);
colorPickerObj.RGBToHEX({r:38,g:133,b:133});		 Method: getValue

<ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent>
constructor(props: {}) {
  this.colorPickerObj.getValue(“rgb(38,133,133)”, ‘Hex’);
}
Method convert the color value from RGB to HSV Method: RGBToHSV

<EJ.ColorPicker id="colorpicker"></EJ.ColorPicker>
var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’);
colorPickerObj.RGBToHSV({h:230,s:98,v:98});		 Method: getValue

<ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent>
constructor(props: {}) {
  this.colorPickerObj.getValue(“rgb(180,71.1,52.9)”, ‘HSV’);
}
Method convert the color value from HSV to RGB Method: HSVToRGB

<EJ.ColorPicker id="colorpicker"></EJ.ColorPicker>
var colorPickerObj = $(‘#colorpicker’).ejColorPicker(‘instance’);
colorPickerObj.HSVToRGB({h:230,s:98,v:98});		 Method: getValue

<ColorPickerComponent id="colorpicker" ref = {(scope) => {this.colorPickerObj = scope}}></ColorPickerComponent>
constructor(props: {}) {
  this.colorPickerObj.getValue(“hsv(180,71.1,52.9)”, ‘RGB’);
}

Events

Behavior API in Essential® JS 1 API in Essential® JS 2
Event triggers before opening the ColorPicker popup Not Applicable Event: beforeOpen

<ColorPickerComponent id="colorpicker" beforeOpen={this.beforeOpen.bind(this)}></ColorPickerComponent>
beforeOpen(args) {
    /** code block */
}
Event triggers before closing the ColorPicker popup Not Applicable Event: beforeClose

<ColorPickerComponent id="colorpicker" beforeClose={this.beforeClose.bind(this)}></ColorPickerComponent>
beforeClose(args) {
    /** code block */
}
Event triggers after opening the ColorPicker popup Event: open

<EJ.ColorPicker id="colorpicker" open={open}></EJ.ColorPicker>
function open(args) {
    /** code block */
}		 Event: open

<ColorPickerComponent id="colorpicker" open={this.open.bind(this)}></ColorPickerComponent>
open(args) {
    /** code block */
}
Event triggers after closing the ColorPicker popup Event: close

<EJ.ColorPicker id="colorpicker" close={close}></EJ.ColorPicker>
function close(args) {
    /** code block */
}		 Not Applicable
Event triggers once the component rendering is completed Event: create

<EJ.ColorPicker id="colorpicker" create={create}></EJ.ColorPicker>
function create(args) {
    /** code block */
}		 Event: created

<ColorPickerComponent id="colorpicker" created={this.created.bind(this)}></ColorPickerComponent>
created() {
    /** code block */
}
Event triggers once the color picker control is destroyed Event: destroy

<EJ.ColorPicker id="colorpicker" destroy={destroy}></EJ.ColorPicker>
function destroy(args) {
    /** code block */
}		 Not Applicable
Event triggers before Switching between Picker / Palette mode Not Applicable Event: beforeModeSwitch

<ColorPickerComponent id="colorpicker" beforeModeSwitch={this.beforeModeSwitch.bind(this)}></ColorPickerComponent>
beforeModeSwitch(args) {
    /** code block */
}
Event triggers after color value has been selected Event: select

<EJ.ColorPicker id="colorpicker" select={select}></EJ.ColorPicker>
function select(args) {
    /** code block */
}		 Event: select

<ColorPickerComponent id="colorpicker" select={this.select.bind(this)}></ColorPickerComponent>
select(args) {
    /** code block */
}
Event triggers after color value has been changed Event: change

<EJ.ColorPicker id="colorpicker" change={change}></EJ.ColorPicker>
function change(args) {
    /** code block */
}		 Event: change

<ColorPickerComponent id="colorpicker" change={this.change.bind(this)}></ColorPickerComponent>
change(args) {
    /** code block */
}