HelpBot Assistant

How can I help you?

Customize colorpicker in React Color picker component

21 Feb 202624 minutes to read

Custom palette

By default, the palette is rendered with default colors. To load custom colors, specify them in the presetColors property. To customize palette tiles, add a custom class using the BeforeTileRender event.

The following sample demonstrates these features.

import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    let presets = {
        'custom1': ['#ef9a9a', '#e57373', '#ef5350',
            '#f44336', '#f48fb1', '#f06292',
            '#ec407a', '#e91e63', '#ce93d8',
            '#ba68c8', '#ab47bc', '#9c27b0',
            '#b39ddb', '#9575cd', '#7e57c2', '#673AB7'],
        'custom2': ['#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5',
            '#90CAF9', '#64B5F6', '#42A5F5', '#2196F3',
            '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4',
            '#80DEEA', '#4DD0E1', '#26C6DA', '#00BCD4'],
        'custom3': ['#80CBC4', '#4DB6AC', '#26A69A', '#009688',
            '#A5D6A7', '#81C784', '#66BB6A', '#4CAF50',
            '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#E6EE9C',
            '#DCE775', '#D4E157', '#CDDC39']
    };
    // Triggers before rendering each palette tile.
    function tileRender(args) {
        args.element.classList.add("e-icons");
        args.element.classList.add("e-custom-tile");
    }
    // riggers while selecting colors from palette.
    function change(args) {
        document.getElementById('preview').style.backgroundColor = args.currentValue.hex;
    }
    return (<div id='container'>
        <div className='wrap'>
            <div id="preview"/>
            <h4>Select Color</h4>
            <ColorPickerComponent id='element' mode='Palette' modeSwitcher={false} inline={true} showButtons={false} columns={4} presetColors={presets} beforeTileRender={tileRender} change={change}/>
        </div>
        </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import { ColorPickerComponent, ColorPickerEventArgs, PaletteTileEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    let presets: { [key: string]: string[] } = {
        'custom1': ['#ef9a9a', '#e57373', '#ef5350',
                        '#f44336', '#f48fb1', '#f06292',
                        '#ec407a', '#e91e63', '#ce93d8',
                        '#ba68c8', '#ab47bc', '#9c27b0',
                        '#b39ddb', '#9575cd', '#7e57c2', '#673AB7'],
        'custom2': ['#9FA8DA', '#7986CB', '#5C6BC0', '#3F51B5',
                        '#90CAF9', '#64B5F6', '#42A5F5', '#2196F3',
                        '#81D4FA', '#4FC3F7', '#29B6F6', '#03A9F4',
                        '#80DEEA', '#4DD0E1', '#26C6DA', '#00BCD4'],
        'custom3': ['#80CBC4', '#4DB6AC', '#26A69A', '#009688',
                        '#A5D6A7', '#81C784', '#66BB6A', '#4CAF50',
                        '#C5E1A5', '#AED581', '#9CCC65', '#8BC34A', '#E6EE9C',
                        '#DCE775', '#D4E157', '#CDDC39']
    };

    // Triggers before rendering each palette tile.
    function tileRender(args: PaletteTileEventArgs): void {
        args.element.classList.add("e-icons");
        args.element.classList.add("e-custom-tile");
    }

    // riggers while selecting colors from palette.
    function change(args: ColorPickerEventArgs): void {
        (document.getElementById('preview') as HTMLElement).style.backgroundColor = args.currentValue.hex;
    }

    return (
        <div id='container'>
        <div className='wrap'>
            <div id="preview"/>
            <h4>Select Color</h4>
            <ColorPickerComponent id='element' mode='Palette' modeSwitcher={false} inline={true} showButtons={false} columns={4} presetColors={presets} beforeTileRender={tileRender} change ={change}/>
        </div>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Hide input area from picker

By default, the input area is rendered in the ColorPicker. To hide it, add the e-hide-value class using the cssClass property.

In the following sample, the ColorPicker renders without an input area.

import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// To hide the input area
function App() {
    return (<div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent cssClass="e-hide-value" modeSwitcher={false}/>
        </div>
        </div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

// To hide the input area
function App() {
    return (
        <div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent cssClass="e-hide-value" modeSwitcher={false} />
        </div>
        </div>
    );
};
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Custom handle

The ColorPicker handle shape and UI can be customized. In the following example, the handle is customized as an SVG icon; you can customize it based on your requirements.

The following sample shows the customized ColorPicker handle.

import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent id='colorpicker' value='#344aae' cssClass='e-custom-picker' modeSwitcher={false}/>
        </div>
        </div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    return (
        <div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent id='colorpicker' value='#344aae' cssClass='e-custom-picker' modeSwitcher={false}/>
        </div>
        </div>
    );
};
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Custom primary button

By default, the applied color is displayed in the primary button. You can customize it to show an icon instead.

In the following sample, the picker icon is added to the primary button, and the change event updates the selected color in the bottom portion of the icon.

import { addClass } from '@syncfusion/ej2-base';
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    let previewIcon;
    let cp;
    let onCreated = onCreated.bind(this);
    let onChange = onChange.bind(this);
    function onChange(args) {
        previewIcon.style.borderBottomColor = args.currentValue.rgba;
    }
    function onCreated() {
        const elem = cp.element.nextElementSibling;
        previewIcon = elem.querySelector('.e-selected-color');
        addClass([previewIcon], 'e-icons');
    }
    return (<div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent ref={(scope) => cp = scope} id='colorpicker' created={onCreated} change={onChange}/>
        </div>
        </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import { addClass } from '@syncfusion/ej2-base';
import { ColorPickerComponent, ColorPickerEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    let previewIcon: HTMLElement;
    let cp: ColorPickerComponent;
    let onCreated: any = onCreated.bind(this);
    let onChange: any = onChange.bind(this);
    function onChange (args: ColorPickerEventArgs): void {
        previewIcon.style.borderBottomColor = args.currentValue.rgba;
    }

    function onCreated() {
        const elem = cp.element.nextElementSibling as HTMLElement;
        previewIcon = elem.querySelector('.e-selected-color') as HTMLElement;
        addClass([previewIcon], 'e-icons');
    }
    return (
        <div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent ref= { (scope) => cp = scope as ColorPickerComponent } id='colorpicker' created={onCreated} change={onChange}/>
        </div>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

The Essential® JS 2 provides a set of icons that can be loaded by applying e-icons class name to the element. You can also use third party icon to customize the primary button.

Display hex code in input

The ColorPicker input element can be displayed in place of the primary button. The applied color hex code is updated in the input.

The following sample shows the ColorPicker with an input displaying the hex code.

import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    let colorPicker;
    let onCreated = onCreated.bind(this);
    function onCreated() {
        const cpElem = colorPicker.element.nextElementSibling;
        cpElem.insertBefore(colorPicker.element, cpElem.children[1]);
    }
    return (<div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent ref={(scope) => colorPicker = scope} id='colorpicker' type='text' created={onCreated} className='e-input'/>
        </div>
        </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    let colorPicker: ColorPickerComponent;
    let onCreated: any = onCreated.bind(this);
    function onCreated(): void {
        const cpElem = colorPicker.element.nextElementSibling as HTMLElement;
        cpElem.insertBefore(colorPicker.element, cpElem.children[1]);
    }

    return (
        <div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent ref={(scope) => colorPicker = scope as ColorPickerComponent} id='colorpicker' type='text' created={onCreated} className='e-input'/>
        </div>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Custom UI

The ColorPicker UI can be customized in various ways. The following sample shows an Excel-like UI customization using the SplitButton and Dialog components. When you click the “more colors” option from the palette, a dialog containing the ColorPicker opens.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ColorPickerComponent, PaletteTileEventArgs, ColorPickerEventArgs } from '@syncfusion/ej2-react-inputs';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { SplitButtonComponent, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';

function App() {
    let splitIcon;
    let colorPicker;
    let pickerDlg;
  
    let animationSettings = { effect: 'Zoom' };
  
    function content(data) {
        function onPickerChange(args) {
          onPaletteChange(args);
          pickerDlg.hide();
        }
  
        return (
            <div className="dialogContent">
                <ColorPickerComponent id='picker' inline={true} modeSwitcher={false} change={onPickerChange} ref={(scope) => { colorPicker = scope; }}></ColorPickerComponent>
            </div>
        )
    }
  
    function onPaletteChange (args) {
        splitIcon = document.getElementById("split-btn").children[0];
        splitIcon.style.borderBottomColor = args.currentValue.rgba;
    }
  
    function onDdPopupOpen(args) {
        args.element.children[1].addEventListener('click', openPickerDlg);
    }
  
    function onBeforeDdPopupClose (args) {
        args.element.children[1].removeEventListener('click', openPickerDlg);
    }
  
    function openPickerDlg() {
        pickerDlg.show();
    }
  
    function pickerDlgOpen() {
        colorPicker.refresh();
        colorPicker.element.nextElementSibling.querySelector('.e-ctrl-btn .e-cancel').addEventListener('click', pickerDlgClose);
    }
  
    function pickerDlgClose() {
        pickerDlg.hide();
    }
  
    function onSplitBtnCreated() {
       splitIcon = document.getElementById("split-btn").children[0];
    }
  
    return (
      <div id='container'>
        <div className='wrap'>
            <ul id="target">
                <li className="e-item e-palette-item">
                    <ColorPickerComponent id='palette' mode='Palette' inline={true} showButtons={false} modeSwitcher={false} change={onPaletteChange}></ColorPickerComponent>
                </li>
                <li className="e-item">
                    <span className="e-menu-icon"></span>
                    More colors...
                </li>
            </ul>
            <h4>Select color</h4>
            <SplitButtonComponent id='split-btn' created={onSplitBtnCreated} iconCss='e-icons e-font-icon' target='#target' open={onDdPopupOpen} beforeClose={onBeforeDdPopupClose}></SplitButtonComponent>
            <DialogComponent id='picker-dialog' cssClass='e-dlg-picker' isModal={true} height='336px' width='270px' ref={ (dialog) => { pickerDlg = dialog; }} target='.wrap' content= {content} overlayClick={pickerDlgClose} open={pickerDlgOpen} visible={false} animationSettings={animationSettings}></DialogComponent>
        </div>
      </div>
    );
}
  
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ColorPickerComponent, PaletteTileEventArgs, ColorPickerEventArgs } from '@syncfusion/ej2-react-inputs';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import { SplitButtonComponent, BeforeOpenCloseMenuEventArgs, OpenCloseMenuEventArgs } from '@syncfusion/ej2-react-splitbuttons';

function App() {
    let splitIcon: HTMLElement;
    let colorPicker: ColorPickerComponent;
    let pickerDlg: DialogComponent;
  
    let animationSettings: Object = { effect: 'Zoom' };
  
    function content(data: any): JSX.Element {
        function onPickerChange(args: ColorPickerEventArgs): void {
          onPaletteChange(args);
          pickerDlg.hide();
        }
  
        return (
            <div className="dialogContent">
                <ColorPickerComponent id='picker' inline={true} modeSwitcher={false} change={onPickerChange} ref={(scope) => { colorPicker = scope as ColorPickerComponent; }}></ColorPickerComponent>
            </div>
        )
    }
  
    function onPaletteChange (args: ColorPickerEventArgs): void {
        splitIcon = document.getElementById("split-btn")!.children[0] as HTMLElement;
        splitIcon.style.borderBottomColor = args.currentValue.rgba;
    }
  
    function onDdPopupOpen(args: OpenCloseMenuEventArgs): void {
        args.element.children[1].addEventListener('click', openPickerDlg);
    }
  
    function onBeforeDdPopupClose (args: BeforeOpenCloseMenuEventArgs): void {
        args.element.children[1].removeEventListener('click', openPickerDlg);
    }
  
    function openPickerDlg(): void {
        pickerDlg.show();
    }
  
    function pickerDlgOpen(): void {
        colorPicker.refresh();
        colorPicker.element.nextElementSibling!.querySelector('.e-ctrl-btn .e-cancel')!.addEventListener('click', pickerDlgClose);
    }
  
    function pickerDlgClose(): void {
        pickerDlg.hide();
    }
  
    function onSplitBtnCreated(): void {
       splitIcon = document.getElementById("split-btn")!.children[0] as HTMLElement;
    }
  
    return (
      <div id='container'>
        <div className='wrap'>
            <ul id="target">
                <li className="e-item e-palette-item">
                    <ColorPickerComponent id='palette' mode='Palette' inline={true} showButtons={false} modeSwitcher={false} change={onPaletteChange}></ColorPickerComponent>
                </li>
                <li className="e-item">
                    <span className="e-menu-icon"></span>
                    More colors...
                </li>
            </ul>
            <h4>Select color</h4>
            <SplitButtonComponent id='split-btn' created={onSplitBtnCreated} iconCss='e-icons e-font-icon' target='#target' open={onDdPopupOpen} beforeClose={onBeforeDdPopupClose}></SplitButtonComponent>
            <DialogComponent id='picker-dialog' cssClass='e-dlg-picker' isModal={true} height='336px' width='270px' ref={ (dialog) => { pickerDlg = dialog as DialogComponent; }} target='.wrap' content= {content} overlayClick={pickerDlgClose} open={pickerDlgOpen} visible={false} animationSettings={animationSettings}></DialogComponent>
        </div>
      </div>
    );
}
  
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.wrap {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  min-height: 350px;
  text-align: center;
}

/* Primary button icon preview */
.e-btn-icon.e-font-icon {
  border-bottom-style: solid;
  border-bottom-width: 3px;
}

/* Primary button icon */
.e-btn-icon.e-font-icon::before {
  content: '\e34c';
}

.e-colorpicker-wrapper.e-hide-palette {
  display: none;
}

.e-dropdown-popup ul .e-item:first-child.e-palette-item {
  height: auto;
  padding: 0;
}

.e-dlg-picker.e-dialog .e-dlg-content {
  padding: 0;
  background-color: transparent;
}

/* Sets ColorPicker height */
.e-dlg-picker.e-dialog {
  max-height: 336px !important;
  background-color: transparent;
}

/* More colors li icon customization */
.e-dropdown-popup ul .e-item:last-child .e-menu-icon {
  height: 24px;
  margin-top: 6px;
  width: 24px;
  background-image: linear-gradient(to bottom, #fff 0, #000 100%);
  background-color: #0450c2;
  background-blend-mode: hard-light;
}

h4 {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 14px;
}