rtl-css-js

RTL conversion for CSS in JS objects

For some locales, it's necessary to change padding-left to padding-right when your text direction is right to left. There are tools like this for CSS (cssjanus for example) which manipulate strings of CSS to do this, but none for CSS in JS where your CSS is represented by an object.

This is a function which accepts a CSS in JS object and can convert padding-left to padding-right as well as all other properties where it makes sense to do that (at least, that's what it's going to be when it's done... This is a work in progress).

This module is distributed via npm which is bundled with node and should be installed as one of your project's dependencies:

npm install --save rtl-css-js

This module is exposed via CommonJS as well as UMD with the global as rtlCSSJS

CommonJS:

const rtlCSSJS = require('rtl-css-js')
const styles = rtlCSSJS({paddingLeft: 23})
console.log(styles) // logs {paddingRight: 23}

You can also just include a script tag in your browser and use the rtlCSSJS variable:

<script src="https://unpkg.com/rtl-css-js@1.0.0-beta.1"></script>
<script>
const styles = rtlCSSJS({paddingRight: 23})
console.log(styles) // logs {paddingLeft: 23}
</script>

CSSJanus was a major inspiration.

I'm not aware of any, if you are please make a pull request and add it here!

Thanks goes to these people (emoji key):

Kent C. Dodds 💻 ⚠️ 🚇

This project follows the all-contributors specification. Contributions of any kind welcome!

MIT