conditionally import bootstrap file in react

M.KH 0
Viewed 73

i'm working on a website that should support both ltr and rtl direction languages..i use bootstrap to do most of the styling's heavy lifting, in my react index.js i import bootstrap files as follows

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

this works well when the html dir attribute is "ltr" but when the html dir attribute is "rtl" i want to import 'bootstrap/dist/css/bootstrap.rtl.css' to handle rtl styling

i can't import both files together as that creates conflicts in the websites styling and doesn't look as desired..what can i do to import the correct file based on the html dir?

i was thinking of something like having condition inside the import statement but it didn't work

import document.documentElement.dir=="ltr"?'bootstrap/dist/css/bootstrap.css':'bootstrap/dist/css/bootstrap.rtl.css';

what can i do to achieve what i want?

EDIT: guys if you have any other different/better approach than my idea please post it in the answers, you don't have to stick to my solution's idea if there are better options

reactjs javascript
2 Answers

You can use conditional import to solve this problem. Here is an example to understand it.

if(document.documentElement.dir=="ltr"){
    import 'bootstrap/dist/css/bootstrap.css'
}else{
   import 'bootstrap/dist/css/bootstrap.rtl.css';
}
Ali Dehghan0

You can try to achieve this with dynamic imports

const v = document.querySelector('#test');

if (!v) {
  import('bootstrap/dist/css/bootstrap.css');
}

But you should be warned, that loading might be finished when your page already loaded which may leads to the page repainting

Drag130
Related