conditionally import bootstrap file in react-CodePudding

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

CodePudding user response：

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';
}

CodePudding user response：

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