I have website template with two styles (rtl - ltr) each with different files for direction. so, how I load each of the styles when I change language (en - ar).
p.s: i use create-react-app.
edit:-
the folder structure
and the style file
.div-style {
background-image: url('../images/imgFile.jpg');
}
so what I did is getting the link tag that has the direction style and changes it's href to the other CSS file, and it works fine.
index.html
<link rel="stylesheet" id="style-direction" href="/css/style-ltr.css">
then in the component, i do something like that
const style = document.getElementById('style-direction');
if (lang === 'ar') {
style.href = '/css/style-ltr.css';
} else {
style.href = '/css/style-rtl.css';
}
If you are using create-react-app, it would have a main file index.js in the src folder of your project.
This index.js has a line where you would see that they have included the index.css file as follows (3rd line):
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
This is the method that is suggested to be used if you want to include css files programatically.
You can then modify the index.js code based on a flag for rtl and ltr. For example, you have a flag variable (Say let ltr = true) which has either true or false based on the language you have selected.
Then the code can be:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//Fetch the flag variable's value based on the language selected.
...
//After that variable (say ltr) is fetched do the following code.
if(ltr === true) {
import './ltr.css';
} else {
import './rtl.css';
}
PS. Above code is just to give you an idea, you can manage the flag in redux store, localStorage etc.
Hope this helps.
Below is the code which will change style sheet without having to reload the page
import i18next from "i18next"
import { Suspense, useEffect } from "react"
import { useSelector } from "react-redux"
export default function LanguageProvider({ children }) {
const currentLang = useSelector(({ lang = "en" }) => lang)
useEffect(() => {
i18next.changeLanguage(currentLang)
}, [currentLang])
if (currentLang === "ar") {
const links = document.getElementsByTagName("link")
for (let each of links) {
if (each.getAttribute("lang") === "english") {
each.href = ""
each.rel = ""
each.integrity = ""
each.crossOrigin = ""
each.setAttribute("lang", "")
}
}
for (let each of links) {
if (each.getAttribute("lang-sheet") === "english") {
each.href = ""
each.rel = ""
each.setAttribute("lang-sheet", "")
}
}
const bootstrapRTLLink = document.createElement("link")
const rtl2 = document.createElement("link")
rtl2.rel = "stylesheet"
rtl2.setAttribute("lang-sheet", "arabic")
rtl2.href = "/style-ar.css"
bootstrapRTLLink.rel = "stylesheet"
bootstrapRTLLink.setAttribute("lang", "arabic")
bootstrapRTLLink.href = "https://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css"
bootstrapRTLLink.integrity =
"sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If"
bootstrapRTLLink.crossOrigin = "anonymous"
document.head.appendChild(bootstrapRTLLink)
document.head.appendChild(rtl2)
} else {
const links = document.getElementsByTagName("link")
for (let each of links) {
if (each.getAttribute("lang") === "arabic") {
each.href = ""
each.rel = ""
each.integrity = ""
each.crossOrigin = ""
each.setAttribute("lang", "")
}
}
for (let each of links) {
if (each.getAttribute("lang-sheet") === "arabic") {
each.href = ""
each.rel = ""
each.setAttribute("lang-sheet", "")
}
}
const ltrLink = document.createElement("link")
ltrLink.rel = "stylesheet"
ltrLink.href = "/style.css"
ltrLink.setAttribute("lang-sheet", "english")
const bootstrapLTRLink = document.createElement("link")
bootstrapLTRLink.rel = "stylesheet"
bootstrapLTRLink.href =
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
bootstrapLTRLink.integrity =
"sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
bootstrapLTRLink.crossOrigin = "anonymous"
bootstrapLTRLink.setAttribute("lang", "english")
document.head.appendChild(bootstrapLTRLink)
document.head.appendChild(ltrLink)
}
if (currentLang === "ar") {
return <Suspense fallback={<></>}>{children}</Suspense>
}
return <Suspense fallback={<></>}>{children}</Suspense>
}
