RTL Support for jss
This plugin enables right-to-left support by flipping every rule on the x-axis.
Internally, it's wrapping rtl-css-js.
You can write your application left-to-right and then turn it into right-to-left using this plugin.
Or you can start right-to-left and turn it into left-to-right.
Make sure you read how to use
plugins
in general.
Important Notice: This plugin must come last in the plugin array since it can only transforms
raw styles.
Installation
You can install this package with the following command:
npm install jss-rtl
Examples
These examples will give you a brief overview of how this library is used:
Simple Usage
You can use jss.use(...)
to augment the global jss
instance.
import jss from 'jss';
import rtl from 'jss-rtl';
jss.use(rtl());
const styles = {
foo: {
'padding-left': '2px',
'margin-right': '2px',
},
bar: {
'transform': 'translate3d(30%, 20%, 10%)',
},
baz: {
flip: false,
'margin-right': '1px',
},
};
jss.createStyleSheet(styles);
Or you can use the jss-preset-default
library and append this one to the end.
import { create } from 'jss';
import preset from 'jss-preset-default';
import rtl from 'jss-rtl';
const presets = preset().plugins;
const jss = create({ plugins: [...presets, rtl()] });
Opting-out for an entire sheet
You can opt-out for a sheet entirely.
const styles = {
foo: {
'padding-left': '2px',
'margin-right': '2px',
},
baz: {
flip: true,
'margin-right': '1px',
},
};
jss.createStyleSheet(styles, { flip: false });
Option enabled
While using this library you might add flip: false
or flip: true
to some of your
rule-sets. It is recommended that you disable this plugin instead of removing it
from the plugins array so that it can at least remove the flip
props from your rule-sets.
This option is also the best method for switching between rtl
and ltr
.
jss.use(rtl({ enabled: false }));
const styles = {
foo: {
'padding-left': '2px',
'margin-right': '2px',
},
baz: {
flip: true,
'margin-right': '1px',
},
};
jss.createStyleSheet(styles, { flip: true });
Option opt
It's also possible to change the default behavior to opt-in
.
jss.use(rtl({ opt: 'in' }));
const styles = {
foo: {
'padding-left': '2px',
'margin-right': '2px',
},
baz: {
flip: true,
'margin-right': '1px',
},
};
jss.createStyleSheet(styles);
const styles = {
foo: {
'padding-left': '2px',
'margin-right': '2px',
},
baz: {
'margin-right': '1px',
},
};
jss.createStyleSheet(styles, { flip: true });
Typings
The typescript type definitions are also available and are installed via npm.
License
This project is licensed under the MIT license.