Change caret icon in React DropDownButton component

24 May 2022 / 1 minute 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.

Source

Preview

app.jsx

index.html

styles.css

app.tsx

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.
class App extends React.Component {
    constructor(props) {
        super(props);
        this.items = [
            {
                text: 'Cut'
            },
            {
                text: 'Copy'
            },
            {
                text: 'Paste'
            }
        ];
        this.beforeOpen = this.beforeOpen.bind(this);
        this.beforeClose = this.beforeClose.bind(this);
    }
    // To update up arrow with `e-caret-up` class.
    beforeOpen() {
        this.ddb.cssClass = 'e-caret-up';
    }
    // To remove `e-caret-up` class.
    beforeClose() {
        this.ddb.cssClass = '';
    }
    render() {
        return (<div>
        <DropDownButtonComponent ref={(scope) => { this.ddb = scope; }} items={this.items} beforeOpen={this.beforeOpen} beforeClose={this.beforeClose}> Clipboard</DropDownButtonComponent>
        </div>);
    }
}
ReactDom.render(<App />, document.getElementById('button'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React DropDownButton</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.1.57/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='button'>
        <div id='loader'>Loading...</div>
    </div>
</body>

</html>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-caret {
  transform: rotate(0deg);
  transition: transform 200ms ease-in-out;
}

.e-caret-up .e-caret {
  transform: rotate(180deg);
}

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.
class App extends React.Component<{}, {}> {
    public ddb: DropDownButtonComponent;
    public items: ItemModel[] = [
      {
          text: 'Cut'
      },
      {
          text: 'Copy'
      },
      {
          text: 'Paste'
      }];
    constructor(props: any) {
      super(props);
      this.beforeOpen = this.beforeOpen.bind(this);
      this.beforeClose = this.beforeClose.bind(this);
    }
    // To update up arrow with `e-caret-up` class.
    public beforeOpen () {
        this.ddb.cssClass = 'e-caret-up';
    }
    // To remove `e-caret-up` class.
    public beforeClose () {
        this.ddb.cssClass = '';
    }
  
    public render() {
      return (
      <div>
        <DropDownButtonComponent ref={(scope) => { this.ddb = scope as DropDownButtonComponent; }} items = {this.items} beforeOpen={this.beforeOpen} beforeClose={this.beforeClose}> Clipboard</DropDownButtonComponent>
        </div>
      );
    }
  }
ReactDom.render(<App />,document.getElementById('button'));