Search results

Handle No Color Support in React ColorPicker component

30 Jul 2021 / 3 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.

Source
Preview
index.tsx
index.html
styles.css
index.jsx
Copied to clipboard
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 preview: HTMLElement;
    constructor(props: any) {
        super(props);
        this.onChange = this.onChange.bind(this);
    }
    public onChange (args: ColorPickerEventArgs): void {
        this.preview.style.backgroundColor = args.currentValue.hex;
        this.preview.textContent = args.currentValue.hex ? args.currentValue.hex : 'No color';
    }

    public componentDidMount() {
        this.preview = document.getElementById('preview') as HTMLElement;
        this.preview.style.backgroundColor = '#ba68c8';
        this.preview.textContent = '#ba68c8';
    }

    public render() {
        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={this.onChange}/>
            </div>
          </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('element'));
Copied to clipboard
<!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/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
Copied to clipboard
#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;
}

#preview {
  border: 1px solid;
  height: 40px;
  line-height: 40px;
}

h4, #preview {
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 14px;
}
Copied to clipboard
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.onChange = this.onChange.bind(this);
    }
    onChange(args) {
        this.preview.style.backgroundColor = args.currentValue.hex;
        this.preview.textContent = args.currentValue.hex ? args.currentValue.hex : 'No color';
    }
    componentDidMount() {
        this.preview = document.getElementById('preview');
        this.preview.style.backgroundColor = '#ba68c8';
        this.preview.textContent = '#ba68c8';
    }
    render() {
        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={this.onChange}/>
            </div>
          </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));