React RTL. Conditional Import CSS

css reactjs right-to-left
Adeel Arshad picture Adeel Arshad · Jun 20, 2017 · Viewed 12k times · Source

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

Mamdouh Alsarayreh picture Mamdouh Alsarayreh · Jun 20, 2017

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.

Related questions

React.js inline style best practices

I'm aware that you can specify styles within React classes, like this: const MyDiv = React.createClass({ render: function() { const style = { color: 'white', fontSize: 200 }; return <div style={style}> Have a good and productive day! </div>; } }); Should I …

Read More
How to add multiple classes to a ReactJS Component?

I am new to ReactJS and JSX and I am having a little problem with the code below. I am trying to add multiple classes to the className attribute on each li: <li key={index} className={activeClass, data.class, "…

Read More
React Js conditionally applying class attributes

I want to conditionally show and hide this button group depending on what is passed in from the parent component which looks like this: <TopicNav showBulkActions={this.__hasMultipleSelected} /> .... __hasMultipleSelected: function() { return false; //return true or false depending on …

Read More