Uses rtl-css-js to convert a style object to its right-to-left counterpart.
yarn add fela-plugin-rtlYou may alternatively use npm i --save fela-plugin-rtl.
Make sure to read the documentation on how to use plugins.
import { createRenderer } from 'fela'
import rtl from 'fela-plugin-rtl'
const renderer = createRenderer({
plugins: [rtl()],
})| Parameter | Value | Default | Description |
|---|---|---|---|
| defaultDirection | ("rtl" | "ltr") | rtl |
The default direction which can be useful if one is using the theme.direction option to dynamically toggle rtl transformation |
{
paddingLeft: 20,
marginRight: '25px',
cursor: 'w-resize',
textShadow: 'red 2px 0'
}{
paddingRight: 20,
marginleft: '25px',
cursor: 'e-resize',
textShadow: 'red -2px 0'
}Apart from enforcing rtl all the time, one can also leverage a special props.theme.direction property to enable/disable rtl transformation. This is especially useful together with React to disable transformation for subtrees.
const rule = () => ({
paddingLeft: 20,
marginRight: '25px',
cursor: 'w-resize',
textShadow: 'red 2px 0',
})
// will be transformed
renderer.renderRule(rule)
// wont be transformed
renderer.renderRule(rule, { theme: { direction: 'ltr' } })Fela is licensed under the MIT License.
Documentation is licensed under Creative Commons License.
Created with ♥ by @robinweser and all the great contributors.