Globalization in React Splitter component

7 Oct 20254 minutes to read

The React Splitter component supports globalization features, including right-to-left (RTL) rendering for languages such as Arabic and Hebrew.

Right-to-Left (RTL) support

To enable RTL layout, set the enableRtl property to true. This adjusts the direction of the Splitter panes and split bars to accommodate RTL writing systems.

The following code shows how to enable RTL behavior.

[Class-component]

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
class App extends React.Component {
    render() {
        return (<div className="App">
    <SplitterComponent id="rtl" height="250px" enableRtl="true">
    <PanesDirective>
      <PaneDirective size='200px' content='Left pane'/>
      <PaneDirective size='200px' content='Middle pane'/>
      <PaneDirective size='200px' content='Right pane'/>
    </PanesDirective>
    </SplitterComponent>
        </div>);
    }
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

class App extends React.Component {
public render() {
  return (<div className="App">
    <SplitterComponent id="rtl" height="250px" enableRtl="true">
    <PanesDirective>
      <PaneDirective size='200px' content = 'Left pane'/>
      <PaneDirective size='200px' content = 'Middle pane'/>
      <PaneDirective size='200px' content = 'Right pane'/>
    </PanesDirective>
    </SplitterComponent>
</div>);
}
}
export default App;

[Functional-component]

import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";
function App() {
    return (<div className="App">
        <SplitterComponent id="rtl" height="250px" enableRtl="true">
        <PanesDirective>
          <PaneDirective size='200px' content='Left pane'/>
          <PaneDirective size='200px' content='Middle pane'/>
          <PaneDirective size='200px' content='Right pane'/>
        </PanesDirective>
        </SplitterComponent>
    </div>);
}
export default App;
import { PaneDirective, PanesDirective, SplitterComponent } from '@syncfusion/ej2-react-layouts';
import * as React from "react";

function App () {

  return (
    <div className="App">
        <SplitterComponent id="rtl" height="250px" enableRtl="true">
        <PanesDirective>
          <PaneDirective size='200px' content = 'Left pane'/>
          <PaneDirective size='200px' content = 'Middle pane'/>
          <PaneDirective size='200px' content = 'Right pane'/>
        </PanesDirective>
        </SplitterComponent>
    </div>
  );

}
export default App;

See Also