Hide control buttons in React Color picker component

29 Aug 20232 minutes to read

ColorPicker can be rendered without control buttons (Apply/Cancel). In this case, while selecting a color, the
ColorPicker pop-up is closed and selected colors can be applied directly. To hide control buttons, set the showButtons property to false.

index.jsx

import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
import * as React from "react";
import * as ReactDOM from "react-dom";
//To hide control buttons.
function App() {
    return (<div id='container'>
        <div className='wrap'>
            <h4>Choose Color</h4>
            <ColorPickerComponent showButtons={false}/>
        </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";

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