---
title: "How to set proper text direction in a localized React app?"
description: "Learn how to set the proper text direction in your localized React app with our step-by-step guide. Ensure your app is accessible and usable for users who read right-to-left languages like Arabic and Hebrew."
category: react
date: 2023-03-17
updated: 2026-10-09
canonical: https://localizely.com/i18n-questions/react/how-to-set-proper-text-direction-in-a-localized-react-app/
---

# How to set proper text direction in a localized React app?

Properly setting text direction in your app is vital for making it accessible and user-friendly for people worldwide. Keep in mind that most languages default to left-to-right text direction, while a smaller group of languages, including Arabic, Hebrew, Persian, Urdu, and Yiddish, use right-to-left text direction.

To ensure your app supports the necessary text directionality, begin by identifying which languages it needs to support. If all languages are left-to-right, you don't need to do anything special. However, if you need to support a right-to-left language, you'll need to set the `dir` attribute on the root element of the page, like the `html` or `body` element. Make sure to check that the layout doesn't break for right-to-left languages. In most cases, you'll need to adjust the layout and positioning of your components to accommodate the text direction.

```javascript
export default function App() {
  const handleLocaleChange = locale => {
    // Handle locale change...

    document.getElementsByTagName("html")[0].dir = getDirection(locale);
  }

  return <Layout onLocaleChange={handleLocaleChange}>...</Layout>;
}
```

Source: https://localizely.com/i18n-questions/react/how-to-set-proper-text-direction-in-a-localized-react-app/