Handle no color support in React Color picker component

30 Jan 202316 minutes to read

The ColorPicker component supports no color functionality. By clicking the no color tile from palette, the selected color becomes empty and considered as no color has been selected from color picker.

Default no color

To achieve this, set noColor property as true.

In the following sample, the first tile of the color palette represents the no color tile. By clicking the no color tile you can achieve the above functionalities.

index.jsx

import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useEffect } from "react";
function App() {
    let preview;
    function onChange(args) {
        preview.style.backgroundColor = args.currentValue.hex;
        preview.textContent = args.currentValue.hex ? args.currentValue.hex : 'No color';
    }
    useEffect(() => {
        preview = document.getElementById('preview');
        preview.style.backgroundColor = '#ba68c8';
        preview.textContent = '#ba68c8';
    }, []);
    return (<div id='container'>
        <div className='wrap'>
            <div id='preview'/>
            <h4>Select Color</h4>
            <ColorPickerComponent id='colorpicker' value='#ba68c8' mode='Palette' noColor={true} showButtons={false} modeSwitcher={false} change={onChange}/>
        </div>
        </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

import { ColorPickerComponent, ColorPickerEventArgs } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { useEffect } from "react";

function App() {
    let preview: HTMLElement;
    function onChange (args: ColorPickerEventArgs): void {
        preview.style.backgroundColor = args.currentValue.hex;
        preview.textContent = args.currentValue.hex ? args.currentValue.hex : 'No color';
    }

    useEffect(() => {
        preview = document.getElementById('preview') as HTMLElement;
        preview.style.backgroundColor = '#ba68c8';
        preview.textContent = '#ba68c8';
    }, []);

    return (
        <div id='container'>
        <div className='wrap'>
            <div id='preview'/>
            <h4>Select Color</h4>
            <ColorPickerComponent id='colorpicker' value='#ba68c8' mode='Palette' noColor={true} showButtons={false} modeSwitcher={false} change={onChange}/>
        </div>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));