Change direction to RTL in React by i18n
Hello everyone
I am Working within React v8.2.2
I want to change the orientation of the entire website - from right to left - when selecting the Arabic language
If you return to the English language, change the direction from left to right
Thank you all
Replies (5)
In Angular documentation
There is a page about the RTL Version and how to work on it
But in the React documentation there is no information about RTL Version
I modified the code in the file "Metronici18n.tsx" to look like this
----------------- CODE -----------------
function getConfig(): Props {
const ls = localStorage.getItem(I18N_CONFIG_KEY)
if (ls) {
try {
const lang = JSON.parse(ls) as Props
if(lang.selectedLang === 'ar') {
document.documentElement.lang = "ar";
document.documentElement.dir = "rtl";
console.log("arabic RTL")
}
else if(lang.selectedLang === 'tr') {
document.documentElement.lang = "tr";
document.documentElement.dir = "ltr";
console.log("TurkiÅŸ LTR")
}
else if(lang.selectedLang === 'en') {
//document.getElementsByClassName('app-navbar-item').item.
document.documentElement.lang = "en";
document.documentElement.dir = "ltr";
console.log("English LTR")
}
return JSON.parse(ls) as Props
} catch (er) {
console.error(er)
}
}
//Arabic is the default language
document.documentElement.lang = "ar"
document.documentElement.dir = "rtl"
return initialState
}
-----------------END CODE -----------------
But I could not move the Sidebar to the right side
There is also a problem in implementing the aforementioned observation
data-kt-menu-placement="bottom-start" => data-kt-menu-placement="bottom-end"
data-kt-menu-placement="right-start" => data-kt-menu-placement="left-start"
When changing languages
Hi,
Unfortunately, dynamic direction switching is currently not supported by Metronic React version.
The only way to change the direction dynamically in our React version is by updating the link href of the main style file. To achieve this, follow the steps below:
- Generate RTL and LTR CSS style files using our HTML version.
To generate styles, refer to our gulp build and rtl version setup docs. - Copy the generated style.bundle.css and style.bundle.rtl.css files to public folder in your React app.
- In the index.html file, add link tag with default direction styles as shown in this gist file.
- Remove the style import line below from src/main.tsx:
import "./_metronic/assets/sass/style.scss"
- To switch the direction, you just need to change the link href from style.bundle.css to style.bundle.rtl.css.
You can reuse switch functions from this gist.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
thank you very much...
it work but There is a simple modification in the “theme-switch-funcions.tsx” file. In “setLtrMode” function
The replacement should be like this
replace(“style.bundle.rtl.css”, “style.bundle.css”));
Hi,
Thank you for pointing out this mistake I have already updated the gist file.
I am glad to hear that it worked for you. Please let us know if you have any additional questions on this topic or anything else.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
