Show Recent color in React Color picker component

21 Feb 20262 minutes to read

The showRecentColors property enables the display of recently selected colors in the ColorPicker’s palette mode. This feature helps users quickly access their frequently used colors.

Note: The showRecentColors feature displays up to 10 recent colors as tiles and is available only in palette mode.

In the following sample, the showRecentColors property is enabled to display recent colors in the palette area.

index.jsx

import { L10n } from '@syncfusion/ej2-base';
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 showRecentColors={true}/>
        </div>
        </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));

index.tsx

import { L10n } from '@syncfusion/ej2-base';
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 showRecentColors={true}/>
        </div>
        </div>
    );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));