Right-To-Left support in Syncfusion React Components

30 Jan 20236 minutes to read

Right-to-Left (RTL) support allows applications to effectively communicate with users who use languages that are written from right to left, such as Arabic, Hebrew, etc.

Syncfusion React UI components support for right-to-left (RTL) by setting the enableRtl property to true. This adds the class name e-rtl to the component element and renders all Syncfusion React components in a right-to-left direction.

Enable RTL for all components

To enable Right-To-Left (RTL) support for all components, users can set the enableRtl property directly in their application. Here is an example code snippet using the ListView component:

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { enableRtl } from '@syncfusion/ej2-base';
// Enables Right to left alignment for all components
enableRtl(true);
function App() {
    const data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
    return (
    // specifies the tag to render the ListView component
    <ListViewComponent id='list' dataSource={data} showHeader='true' headerTitle='Painting types'></ListViewComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { enableRtl } from '@syncfusion/ej2-base'
// Enables Right to left alignment for all components
enableRtl(true);

function App() {
  const data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

  return (
    // specifies the tag to render the ListView component
    <ListViewComponent id='list' dataSource={data} showHeader = 'true' headerTitle = 'Painting types' ></ListViewComponent>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Enable RTL for an individual component

To enable Right-To-Left (RTL) support for an individual component, users can set the enableRtl property in the component’s options. Here is an example code snippet using the ListView component:

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
    const data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];
    return (
    // specifies the tag to render the ListView component
    <ListViewComponent id='list' dataSource={data} showHeader='true' headerTitle='Painting types' enableRtl='true'></ListViewComponent>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';

function App() {
  const data = ["Artwork", "Abstract", "Modern Painting", "Ceramics", "Animation Art", "Oil Painting"];

  return (
    // specifies the tag to render the ListView component
    <ListViewComponent id='list' dataSource={data} showHeader = 'true' headerTitle = 'Painting types' enableRtl = 'true' ></ListViewComponent>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React ListView</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>