Right to left (RTL) support in React

Question

What would be the best way to implement RTL support in React apps? Is there a way to override default <p> and <span> tags (components) to add RTL support so that I don't have to rewrite components I already wrote to have RTL support? (for example, to have some global variable window.RTL, so when set to true to have all <p> and <span> tags flip text direction to RTL). I could probably change the build system, or make a babel plugin, that will replace all React.createElement("p" ...) with my own implementation of a p tag, but is there a better solution?

Thanks.

Answer 1

A more optimal way is to use CSS / HTML abilities for that:

• direction CSS property
• Unicode symbols ‏ / ‎
• Attach .rtl / .ltr classes to body and use them to change order

In that cases order of your elements in HTML are the same for RTL and LTR. The difference in applied CSS rules.

If you really need the order of elements in React, you can create own component that reverses the list of children if RTL:

const Dir = React.createClass({
  render: function() {
    let children = (this.props.direction == 'rtl' && this.props.children && this.props.children.reverse) ? this.props.children.reverse() : null;
    return <div>
      { children }
    </div>;
  }
});

// And use as:
// directionVariable = 'rtl'|'ltr'
<Dir direction={ directionVariable }>
  <a>First</a>
  <a>Second</a>
  <a>Third</a>
</Dir>