How to enable RTL in React Split Button

4 Sep 20263 minutes to read

Enable right-to-left (RTL) layout support in the React Split Button 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 React Split Button 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'));