HelpBot Assistant

How can I help you?

Render palette alone in React Color picker component

21 Feb 20262 minutes to read

To render only the palette in the ColorPicker, set the mode property to Palette and the modeSwitcher property to false.

In the following sample, the showButtons property is set to false to hide the control buttons, displaying only the Palette area.

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 mode="Palette" modeSwitcher={false} showButtons={false}></ColorPickerComponent>
        </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 mode = "Palette" modeSwitcher={false} showButtons ={false}></ColorPickerComponent>
        </div>
      </div>
    );
};
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

To render only the Picker, set the mode property to Picker.