Change caret icon in React Drop down button component

7 Aug 20234 minutes to read

Dropdown arrow can be customized on popup open and close. It can be handled in beforeOpen and beforeClose event.

In the following example, the up arrow is updated on popup close and down arrow is updated on popup open using beforeOpen and beforeClose event by adding and removing e-caret-up class.

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
    let ddb;
    let items = [
        {
            text: 'Cut'
        },
        {
            text: 'Copy'
        },
        {
            text: 'Paste'
        }
    ];
    // To update up arrow with `e-caret-up` class.
    function beforeOpen() {
        ddb.cssClass = 'e-caret-up';
    }
    // To remove `e-caret-up` class.
    function beforeClose() {
        ddb.cssClass = '';
    }
    return (<div>
      <DropDownButtonComponent ref={(scope) => { ddb = scope; }} items={items} beforeOpen={beforeOpen} beforeClose={beforeClose}> Clipboard</DropDownButtonComponent>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render DropDownButton.
function App() {
    let ddb: DropDownButtonComponent;
    let items: ItemModel[] = [
      {
          text: 'Cut'
      },
      {
          text: 'Copy'
      },
      {
          text: 'Paste'
      }];
    // To update up arrow with `e-caret-up` class.
    function beforeOpen () {
        ddb.cssClass = 'e-caret-up';
    }
    // To remove `e-caret-up` class.
    function beforeClose () {
        ddb.cssClass = '';
    }
  
    return (
    <div>
      <DropDownButtonComponent ref={(scope) => { ddb = scope as DropDownButtonComponent; }} items = {items} beforeOpen={beforeOpen} beforeClose={beforeClose}> Clipboard</DropDownButtonComponent>
      </div>
    );
  }
export default App;
ReactDom.render(<App />,document.getElementById('button'));