Change attribute of JS widget direction=rtl into dir=rtl

Imagine there is a slider widget, like this.. <SliderWidget width="500" height="360"> Default direction is left-to-right, and it can be configured right-to-left, like this.. <SliderWidget width="500" height="360" direction="rtl"> It works, But I need to make the slider work rtl using this this.. <SliderWidget width="500" height="360" dir="rtl"> The slider plugin is SwiperJS and widget is built on ReactJS, but what I'm trying to do is make the widget work rtl if I gave direction="rtl" or dir="rtl" How to achieve that? Is there a way to extend the direction="rtl" functionality to the attribute dir="rtl"?


I don't understand very well your problem (why not simply use direction?), but you can always wrap a component and do whatever you want with it!

var MyWrapper = React.createClass({
  propTypes: {
    dir: React.PropTypes.oneOf(['rtl', 'ltr'])

  getDefaultProps: function() {
    return {
      dir: 'rtl'

  render: function() {
    return <SliderWidget width="500" height="360" direction={this.props.dir}/>;

Read more about props here:

Thank you guys for the support.. I was able to fix this by adding an "OR" expression to the "if" condition. getInitialState : function () { this.slides = []; var direction = 'ltr'; var directionFactor = 1; if (this.props.direction === 'rtl' || this.props.dir === 'rtl') { direction = 'rtl'; directionFactor = -1; }

Need Your Help

Using QFrame to display different panes of information?

python qt pyqt

I'm trying to get a QFrame to serve as a "display area" for a couple different kinds of information, eg: you click on something in a list view and an info pane shows up in the frame

Raw string literals and file codification

c++ c++11 string-literals rawstring

C++11 introduced the raw string literals which can be pretty useful to represent quoted strings, literals with lots of special symbols like windows file paths, regex expressions etc...