HelpBot Assistant

How can I help you?

Right-To-Left Support in Syncfusion® React Components

2 Feb 20267 minutes to read

Right-to-Left (RTL) support is essential for applications serving users who read and write in languages that flow from right to left, such as Arabic, Hebrew, and Persian. RTL rendering ensures that UI elements, text alignment, and navigation patterns align with the natural reading direction of these languages, providing an intuitive and culturally appropriate user experience.

Syncfusion® React UI components provide built-in RTL support through the enableRtl property. When set to true, this property applies the e-rtl CSS class to the component, automatically rendering all internal elements and layout structures in a right-to-left direction. This transformation affects text alignment, icon positioning, navigation flow, and component-specific layouts without requiring manual CSS adjustments.

Enable RTL for all components

To enable RTL support globally across all Syncfusion® components in the application, set the enableRtl property to true using the L10n.load() method or by configuring it at the application root level. This approach ensures consistent RTL behavior throughout the application and is recommended when the entire application targets RTL language users. The following example demonstrates global RTL enablement 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/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-lists/styles/tailwind3.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 RTL support for specific components while maintaining left-to-right rendering for the rest of the application, set the enableRtl property directly on individual component instances. This selective approach is useful in mixed-language interfaces or when only certain sections of the application require RTL rendering. The following example demonstrates individual RTL enablement 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/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-lists/styles/tailwind3.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>