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

• src
  • css
    • style-rtl.css
    • style-ltr.css
  • images
    • imgFile.jpg
  • index.js

and the style file

.div-style {
  background-image: url('../images/imgFile.jpg');
}

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

• src
  • css
    • style-rtl.css
    • style-ltr.css
  • images
    • imgFile.jpg
  • index.js

and the style file

.div-style {
  background-image: url('../images/imgFile.jpg');
}

• javascript
• reactjs

Share Improve this question Follow edited Jan 29, 2018 at 9:01 mohamed al-ashry asked Jan 29, 2018 at 6:42 mohamed al-ashrymohamed al-ashry 26166 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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 ponent, 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./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/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>
}