Create right to left splitbutton in React Split button component

30 Jan 20233 minutes to read

SplitButton 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 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'));