Render palette alone in React Color picker component

29 Aug 20232 minutes to read

To render the Palette alone in ColorPicker, specify the mode property as Palette, and set the modeSwitcher property to false.

In the following sample, the showButtons property is disabled to hide the control buttons and it renders only the Palette area.

index.jsx

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'));

index.tsx

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 Picker alone specify the mode property as ‘Picker’.