Create right to left splitbutton in React Split button component

2 Mar 20263 minutes to read

Enable right-to-left (RTL) layout support in the SplitButton component by setting the enableRtl property to true. RTL support flips the component layout and text direction, making it suitable for languages that read from right to left, such as Arabic, Hebrew, and Persian.

The following example demonstrates how to implement RTL support in the SplitButton component.

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render SplitButton.
function App() {
    let items = [
        {
            text: 'Autosum'
        },
        {
            text: 'Average'
        },
        {
            text: 'Count numbers'
        },
        {
            text: 'Min'
        },
        {
            text: 'Max'
        }
    ];
    return (<div>
      <SplitButtonComponent items={items} enableRtl={true} iconCss='e-sb e-sigma'>Autosum</SplitButtonComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

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

enableRipple(true);

// To render SplitButton.
function App() {

  let items: ItemModel[] = [
    {
        text: 'Autosum'
    },
    {
        text: 'Average'
    },
    {
        text: 'Count numbers'
    },
    {
        text: 'Min'
    },
    {
        text: 'Max'
    }];
  return (
  <div>
      <SplitButtonComponent items = {items} enableRtl ={true} iconCss= 'e-sb e-sigma'>Autosum</SplitButtonComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));