Require and UnRequire a file dynamically

Question

I am changing language dynamically, so I want to switch from rtl to ltr and vice-versa.

I am using bootstrap-rtl for rtl support.

Here is my code:

  componentWillReceiveProps(nextProps) {
    if (this.props.isRTL !== nextProps.isRTL) {
      if (nextProps.isRTL) {
        require('bootstrap-rtl/dist/css/bootstrap-rtl.css');
      } else {
        //what should i do here????????????
      }
    }
  }

So, when component first renders, english is selected. So, isRTL is false. As a result require('........bootstrap-rtl.css') doesn't come to play.
Now, When I change language to arabic, isRTL becomes true and bootstrap-rtl.css is required. Now, I can see everything rtl.
Now, when I again change language to english, isRTL becomes false, but bootstrap-rtl.css is not unrequired, so still I see everything rtl.

Can someone suggest me the solution or even alternate solution is acceptable for me.

Possible duplicate of [unloading code/modules](https://stackoverflow.com/questions/6676612/unloading-code-modules) — Shadowfool, May 30 '18 at 19:23
I haven;t messed with React much, so i'm kinda guessing here. But when you inspect the page using your dev tools after switching to arabic, do you see a `` to the stylesheet added? (More to the point, see what happens if you delete it.) — cHao, May 30 '18 at 19:23
@Shadowfool sorry to say that the link you gave was already tried by me, but it does not work. — Vishal, May 30 '18 at 19:28
@cHao yes I see a link added to the head section of the document. If I delete it manually, rtl is gone and I get ltr. Thanks for the suggestion. can you tell me what to do next? — Vishal, May 30 '18 at 19:30
Possible duplicate of [Replacing css file on the fly (and apply the new style to the page)](https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page) — gforce301, May 30 '18 at 19:37
@gforce301 that does not contain anything about react. It has solutions using jquery. — Vishal, May 30 '18 at 19:43
@Vishal: My personal suggestion, if you want the ability to do both on the fly, is to use something like [bootstrap-rtl-ondemand](https://www.npmjs.com/package/bootstrap-rtl-ondemand), and set the `dir` attribute on the `` element as needed. — cHao, May 30 '18 at 19:50
@Vishal: After switching to the ondemand stuff, it looks to be as simple as `document.documentElement.dir = nextProps.isRTL ? 'rtl' : 'ltr';`. — cHao, May 30 '18 at 20:09
@cHao I have tried to implement the code that you gave and I can now change dir attribute of html from ltr to rtl and vice-versa. But applied css always looks rtl. Can you please guide me on importing the css file as documentation suggests that I should import from a folder called bootstrap-rtl but the name of the package is bootstrap-rtl-ondemand and same is the case with bootstrap-rtl package. — Vishal, May 30 '18 at 20:26
@cHao I got it. I had to uninstall bootstrap-rtl and then install bootstrap-rtl-ondemand and then I had to reference the css file from bootstrap-rtl-ondemand folder from node_modules. Thanks man. Can you please post it as an answer? so that I can mark it as accepted and others in future may get help about this. — Vishal, May 30 '18 at 20:33

score 1 · Accepted Answer · edited May 31 '18 at 00:19

I don't know if there's anything special about how React requires stuff, but in general, loading a stylesheet basically means inserting a <link> element that refers to it. You can "unload" the stylesheet by removing the element that refers to it. You might also be able to disable it by setting its rel attribute to something besides "stylesheet".

But any change requires first finding that element. It's kinda messy.

If you want to be able to switch from RTL to LTR and back on the fly, there's a better way than "unloading" the RTL CSS. There's a fork of bootstrap-rtl called bootstrap-rtl-ondemand which, instead of always applying RTL styles, only applies them when the document's direction is set to "rtl".

Install the package above (or if you don't use NPM, get at least the CSS files from the package's Github repo), and set things up so that the CSS loads after Bootstrap's.

Now you can switch between RTL and LTR basically at will. Your method above becomes as simple as:

  componentWillReceiveProps(nextProps) {
    if (this.props.isRTL !== nextProps.isRTL) {
      document.documentElement.dir = (nextProps.isRTL) ? 'rtl' : 'ltr';
    }
  }

I'll leave the edit for others to decide on. My experience suggests to me that checking for changes before applying them wouldn't have a significant effect either way in a case like this, but as i've mentioned, i haven't messed with React much. :P — cHao, May 30 '18 at 21:06

Require and UnRequire a file dynamically

1 Answers1