Globalization in React Splitter component

25 Jan 2023 / 1 minute to read

RTL

Specifies the direction of the Splitter component using the enableRtl property. For writing systems that require it like Arabic, Hebrew, etc., the direction can be switched to right-to-left.

The following code shows how to enable RTL behavior.

[Class-component]

Source

Preview

App.jsx

App.tsx

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]

Source

Preview

App.jsx

App.tsx

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;

Globalization in React Splitter component

RTL

See Also