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.

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

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

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