Create right to left dropdownbutton in React Drop down button component

30 Jan 20233 minutes to read

DropDownButton component has RTL support. This can be achieved by setting enableRtl as true.

The following example illustrates how to enable right-to-left support in DropDownButton component.

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 items = [
        {
            text: 'Edit'
        },
        {
            text: 'Delete'
        },
        {
            text: 'Mark as Read'
        },
        {
            text: 'Like Message'
        }
    ];
    return (<div>
      <DropDownButtonComponent items={items} iconCss='ddb-icons e-message' enableRtl={true}> Message </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 items: ItemModel[] = [
    {
        text: 'Edit'
    },
    {
        text: 'Delete'
    },
    {
        text: 'Mark as Read'
    },
    {
        text: 'Like Message'
    }];

    return (
    <div>
      <DropDownButtonComponent items = {items} iconCss= 'ddb-icons e-message' enableRtl={true}> Message </DropDownButtonComponent>
      </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));