By default, the Palette will be rendered with default colors. To load custom colors in the palette, specify the colors in the presetColors
property. To customize the color palette, add a custom class to palette tiles using BeforeTileRender
event.
The following sample demonstrates the above functionalities.
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
constructor() {
super(...arguments);
this.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.
tileRender(args) {
args.element.classList.add("e-icons");
args.element.classList.add("e-custom-tile");
}
// riggers while selecting colors from palette.
change(args) {
document.getElementById('preview').style.backgroundColor = args.currentValue.hex;
}
render() {
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={this.presets} beforeTileRender={this.tileRender} change={this.change}/>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 React ColorPicker</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="React ColorPicker Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#loader {
color: #008cff;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
h4 {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
font-size: 14px;
}
/* Tile customization styles */
#element+.e-container {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
#element+.e-container .e-palette .e-custom-tile {
border: 0;
color: #fff;
height: 36px;
font-size: 18px;
width: 36px;
line-height: 36px;
border-radius: 50%;
margin: 2px 5px;
}
#element+.e-container .e-custom-palette.e-palette-group {
height: 182px;
}
/* Selected state icon */
#element+.e-container .e-palette .e-custom-tile.e-selected::before {
content: '\e933';
}
#element+.e-container .e-palette .e-custom-tile.e-selected {
outline: none;
}
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
#preview {
background-color: #ba68c8;
height: 50px;
width: 100%;
}
import { ColorPickerComponent, ColorPickerEventArgs, PaletteTileEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component<{}, {}> {
public 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.
public tileRender(args: PaletteTileEventArgs): void {
args.element.classList.add("e-icons");
args.element.classList.add("e-custom-tile");
}
// riggers while selecting colors from palette.
public change(args: ColorPickerEventArgs): void {
(document.getElementById('preview') as HTMLElement).style.backgroundColor = args.currentValue.hex;
}
public render() {
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={this.presets} beforeTileRender={this.tileRender} change ={this.change}/>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
By default, the input area will be rendered in ColorPicker. To hide the input area from it, add e-hide-value
class to ColorPicker using the cssClass
property.
In the following sample, the ColorPicker is rendered without 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
class App extends React.Component {
render() {
return (<div id='container'>
<div className='wrap'>
<h4>Choose Color</h4>
<ColorPickerComponent cssClass="e-hide-value" modeSwitcher={false}/>
</div>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 React ColorPicker</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="React ColorPicker Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#loader {
color: #008cff;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 14px;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#element+.e-container {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.wrap {
margin: 0 auto;
width: 300px;
text-align: center;
}
h4 {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
font-size: 14px;
}
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
// To hide the input area
class App extends React.Component<{}, {}> {
public render() {
return (
<div id='container'>
<div className='wrap'>
<h4>Choose Color</h4>
<ColorPickerComponent cssClass="e-hide-value" modeSwitcher={false} />
</div>
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('element'));
Color picker handle shape and UI can be customized. Here, we have customized the handle as svg icon
. The same way you can customize the handle based on your requirement.
The following sample show the customized color picker handle.
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
render() {
return (<div id='container'>
<div className='wrap'>
<h4>Choose Color</h4>
<ColorPickerComponent id='colorpicker' value='#344aae' cssClass='e-custom-picker' modeSwitcher={false}/>
</div>
</div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 React ColorPicker</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="React ColorPicker Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#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: 300px;
text-align: center;
}
/* To hide the handle balloon preview */
.e-color-picker-tooltip.e-popup.e-popup-open {
display: none;
}
/* Handle customization styles */
.e-custom-picker .e-container .e-hsv-container .e-handler {
background: transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNiAxNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMTYgMTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KPC9zdHlsZT4KPGc+Cgk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjE2LDYgMTAsNiAxMCwwIDYsMCA2LDYgMCw2IDAsMTAgNiwxMCA2LDE2IDEwLDE2IDEwLDEwIDE2LDEwIAkiLz4KPC9nPgo8cGF0aCBkPSJNMTAsNlYwSDZ2NkgwdjRoNnY2aDR2LTZoNlY2SDEweiBNMTUsOUg5djZIN1Y5SDFWN2g2VjFoMnY2aDZWOXoiLz4KPC9zdmc+Cg==');
font-size: 16px;
height: 16px;
line-height: 16px;
margin-left: -8px;
margin-top: -8px;
border: none;
box-shadow: none;
width: 16px;
}
h4 {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
font-size: 14px;
}
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component<{}, {}> {
public render() {
return (
<div id='container'>
<div className='wrap'>
<h4>Choose Color</h4>
<ColorPickerComponent id='colorpicker' value='#344aae' cssClass='e-custom-picker' modeSwitcher={false}/>
</div>
</div>
);
}
};
ReactDOM.render(<App />, document.getElementById('element'));
By default, the applied color will be updated in primary button of the color picker. You can customize that as icon
.
In the following sample, the picker
icon is added to primary button and using change
event the selected color will be updated in 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";
class App extends React.Component {
constructor(props) {
super(props);
this.onCreated = this.onCreated.bind(this);
this.onChange = this.onChange.bind(this);
}
onChange(args) {
this.previewIcon.style.borderBottomColor = args.currentValue.rgba;
}
onCreated() {
const elem = this.cp.element.nextElementSibling;
this.previewIcon = elem.querySelector('.e-selected-color');
addClass([this.previewIcon], 'e-icons');
}
render() {
return (<div id='container'>
<div className='wrap'>
<h4>Choose Color</h4>
<ColorPickerComponent ref={(scope) => this.cp = scope} id='colorpicker' created={this.onCreated} change={this.onChange}/>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 React ColorPicker</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="React ColorPicker Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#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: 300px;
text-align: center;
}
/* Icon customization */
.e-colorpicker-wrapper #colorpicker+.e-split-btn-wrapper .e-split-btn .e-selected-color {
background: none;
border-bottom-style: solid;
border-bottom-width: 3px;
width: 14px;
margin: 0px 2px;
border-bottom-color: #008000;
}
.e-colorpicker-wrapper #colorpicker+.e-split-btn-wrapper .e-split-btn .e-selected-color .e-split-preview {
display: none;
}
.e-colorpicker-wrapper #colorpicker+.e-split-btn-wrapper .e-split-btn .e-selected-color::before {
content: '\e35c';
}
h4 {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
font-size: 14px;
}
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";
class App extends React.Component<{}, {}> {
public previewIcon: HTMLElement;
public cp: ColorPickerComponent;
constructor(props: any) {
super(props);
this.onCreated = this.onCreated.bind(this);
this.onChange = this.onChange.bind(this);
}
public onChange (args: ColorPickerEventArgs): void {
this.previewIcon.style.borderBottomColor = args.currentValue.rgba;
}
public onCreated() {
const elem = this.cp.element.nextElementSibling as HTMLElement;
this.previewIcon = elem.querySelector('.e-selected-color') as HTMLElement;
addClass([this.previewIcon], 'e-icons');
}
public render() {
return (
<div id='container'>
<div className='wrap'>
<h4>Choose Color</h4>
<ColorPickerComponent ref= {(scope) => this.cp = scope as ColorPickerComponent} id='colorpicker' created={this.onCreated} change={this.onChange}/>
</div>
</div>
);
}
}
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.
The color picker input element can be showcased in the place of primary button. The applied color hex code will be updated in the primary button input.
The following sample shows the color picker with input.
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.onCreated = this.onCreated.bind(this);
}
onCreated() {
const cpElem = this.colorPicker.element.nextElementSibling;
cpElem.insertBefore(this.colorPicker.element, cpElem.children[1]);
}
render() {
return (<div id='container'>
<div className='wrap'>
<h4>Choose Color</h4>
<ColorPickerComponent ref={(scope) => this.colorPicker = scope} id='colorpicker' type='text' created={this.onCreated} className='e-input'/>
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 React ColorPicker</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="React ColorPicker Component" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='element'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
#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: 300px;
text-align: center;
}
/* Input element customization */
.e-colorpicker-wrapper .e-split-btn-wrapper #colorpicker.e-input {
height: 16px;
margin: 0;
opacity: 1;
position: initial;
width: 75px;
}
/* To hide primary button */
.e-colorpicker-wrapper .e-split-btn-wrapper .e-split-btn {
display: none;
}
/* Secondary button customization */
.e-colorpicker-wrapper .e-split-btn-wrapper .e-btn.e-dropdown-btn {
background: transparent;
border-color: transparent;
border-bottom-color: rgba(0, 0, 0, 0.42);
}
.e-colorpicker-wrapper .e-split-btn-wrapper .e-input:focus+.e-btn.e-dropdown-btn {
padding-bottom: 3px;
border-bottom-width: 2px;
border-bottom-color: #e3165b;
}
.e-colorpicker-wrapper .e-split-btn-wrapper .e-btn.e-dropdown-btn .e-caret {
transform: rotate(0deg);
transition: transform 200ms ease-in-out;
}
.e-colorpicker-wrapper .e-split-btn-wrapper .e-btn.e-dropdown-btn.e-active .e-caret {
transform: rotate(180deg);
}
h4 {
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
font-size: 14px;
}
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
class App extends React.Component<{}, {}> {
public colorPicker: ColorPickerComponent;
constructor(props: any) {
super(props);
this.onCreated = this.onCreated.bind(this);
}
public onCreated(): void {
const cpElem = this.colorPicker.element.nextElementSibling as HTMLElement;
cpElem.insertBefore(this.colorPicker.element, cpElem.children[1]);
}
public render() {
return (
<div id='container'>
<div className='wrap'>
<h4>Choose Color</h4>
<ColorPickerComponent ref={(scope) => this.colorPicker = scope as ColorPickerComponent} id='colorpicker' type='text' created={this.onCreated} className='e-input'/>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('element'));