HelpBot Assistant

How can I help you?

Mode and value in React Color picker component

21 Feb 20267 minutes to read

Inline

By default, the ColorPicker renders as a SplitButton and opens a popup to access the ColorPicker. To render the ColorPicker container alone and access it directly, set the inline property to true.

The following sample shows inline rendering of the ColorPicker.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
//To render component as inline.
function App() {
    return (<div id='container'>
          <div className='wrap'>
              <h4>Choose Color</h4>
              <ColorPickerComponent inline={true} showButtons={false}></ColorPickerComponent>
          </div>
        </div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';

//To render component as inline.
function App() {
      return (
        <div id='container'>
          <div className='wrap'>
              <h4>Choose Color</h4>
              <ColorPickerComponent inline={true} showButtons={false}></ColorPickerComponent>
          </div>
        </div>
      );
};
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

The showButtons property is disabled in this sample because the control buttons are not needed for inline rendering. To learn about the control buttons’ functionality, refer to the showButtons sample.

Rendering palette at initial load

By default, the Picker area is rendered initially. To open the ColorPicker popup with the Palette area rendered, set the mode property to Palette.

In the following sample, the ColorPicker opens with the Palette rendered initially.

import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
//To render palette at initial load.
function App() {
    return (<div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent mode="Palette"/>
        </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 render palette at initial load.
function App() {
    return (
      <div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent mode="Palette"/>
        </div>
      </div>
    );
};
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

Color value

The value property specifies the ColorPicker’s color value. It supports three- or six-digit hex codes. To include opacity, use four- or eight-digit hex codes.

In the following sample, the color value is set as a four-digit hex code; the last digit represents the opacity value.

import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
//To set color value.
function App() {
    return (<div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent value="035a"/>
        </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 set color value.
function App() {
    return (
      <div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent value="035a"/>
        </div>
      </div>
    );
};
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

The value property supports hex code with or without # prefix.

See Also