From 470cf1fd6f716d48442ee7b3b568d4321c4f310b Mon Sep 17 00:00:00 2001 From: Darius Kazemi Date: Fri, 2 Apr 2021 09:07:53 -0700 Subject: [PATCH] Alternative to `dir` element on `` for RTL Adding `dir="rtl"` to the `` element is only one solution for configuring RTL for native components. You can also wrap them in a lower-level div, as long as it is the parent of all your UI components. This is helpful because `` is often defined as a template outside the scope of a React app, whereas a `
` that wraps the entire application can be easily controlled from an application component like a language switching toggle. --- .../pages/guides/right-to-left/right-to-left.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/docs/src/pages/guides/right-to-left/right-to-left.md b/docs/src/pages/guides/right-to-left/right-to-left.md index d5a94b556c4329..2570bd404ffe35 100644 --- a/docs/src/pages/guides/right-to-left/right-to-left.md +++ b/docs/src/pages/guides/right-to-left/right-to-left.md @@ -12,6 +12,20 @@ Make sure the `dir` attribute is set on the body, otherwise native components wi ``` +As an alternative to the above, you can also wrap your application in an element with the `dir` attribute: + +```jsx +function App() { + return ( +
+ +
+ ); +} +``` + +This can be helpful for creating components to toggle language settings in the live application. + ### 2. Theme Set the direction in your custom theme: