React RTL. Conditional Import CSS

Question

I am incorporating RTL to my React application. I have two CSS files, one for LTR and one for RTL. I have a drop down from where user select either English version or Arabic version.

I am stuck with that how to conditional import my RTL CSS file when user select Arabic version and back to normal CSS file when user select English.

Any help or guidance on this will be highly appreciated

I am using React & webpack

Regards

Answer 1

I have faced this problem before, What I have done is that when my main container is mounting, I check for the language, if it's Arabic, I require the Arabic CSS file, if not I require the other.

Example:

class Main extends Component {
    componentWillMount() {
         if(this.props.language === 'ar') {
            require('arabic.css');
         } else {
            require('english.css');
         }
    }
}

I'm using Redux as well, which makes it easier for me to get the initial or default language, and change all the other components accordingly as well.

Just make sure you have the CSS loader configured in your webpack configuration file.

Answer 2

Use React.Lazy and React.Suspense to conditionally import them.

Read this article