ReactJS dynamically import css files to switch between Bootstrap and Bootstrap RTL

Question

Twitter Bootstrap v5 provides two different css files for LTR vs RTL.

If I want to use the regular LTR version I can be import it in my index.ts as follows:

import 'bootstrap/dist/css/bootstrap.min.css';      // Stylesheet
import 'bootstrap/dist/js/bootstrap.bundle.min';    // Javascript

And if I want the RTL version I can imported as so:

import 'bootstrap/dist/css/bootstrap.rtl.min.css';  // Stylesheet
import 'bootstrap/dist/js/bootstrap.bundle.min';    // Javascript

I'm also using react-i18next to switch between Arabic and English translations to propagate the proper text in my components and detect the current language.

const { t, i18n } = useTranslation();
const language = i18n.resolvedLanguage;    // to detect the current language
<h1>{t('hello')}</h1>                      // to render the proper translation

I have no issues in my translations. What I want to achieve is to dynamically import the proper css during runtime according to the currently resolved language. If the language is Arabic I want to import the rtl css; otherwise, I want to import the regular ltr css.

I couldn't find an easy way to achieve this. I tried many different approaches using lazy and suspense but end up loading both files after I switch. I have also used react-helmet to switch the href of the link tag but can't achieve this in a clean way. Either errors or warnings in my console. The only work around I could implement is loading the css from a CDN and switch with helmet.

Anyone can suggest a clean way of dynamically load the proper CSS. Thanks.

Does this answer your question? Dynamically load a stylesheet with React — isherwood
– isherwood, Commented Aug 19, 2022 at 18:09
@isherwood Yes! The answer looks promising thanks. I decided to drop bootstrap alltogether and use vanilla flexbox instead. — moeabdol
– moeabdol, Commented Aug 21, 2022 at 2:40

navid abbasnejad · Accepted Answer · 2023-04-29 10:35:54Z

1

You can use 2 other components for this

for rtl language

import App from "./App";
import 'bootstrap/dist/css/bootstrap.rtl.min.css'

function LayoutRtl() {
  return (<App />)
}

export default LayoutRtl

for ltr language

import App from "./App";
import 'bootstrap/dist/css/bootstrap.min.css';
function Layout() {

  return (<App />)
}

export default Layout

and for calling those

  const { i18n } = useTranslation();
  const language = i18n.language; 
  return language!=="fa" /* rtl language code */?( <Layout />):(<LayoutRtl />);

I tried this and it worked

answered Apr 29, 2023 at 10:35

navid abbasnejad

314 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

moeabdol Over a year ago

Thank you @navid abbasnejad very clear answer. Can I lazy load the layout components?

navid abbasnejad Over a year ago

Yes, you can lazy load the layout components using React's lazy loading and Suspense.

Collectives™ on Stack Overflow

ReactJS dynamically import css files to switch between Bootstrap and Bootstrap RTL

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related