fela-plugin-rtl

Uses rtl-css-js to convert a style object to its right-to-left counterpart.

Installation

yarn add fela-plugin-rtl

You may alternatively use npm i --save fela-plugin-rtl.

Usage

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()],
})

Configuration

Parameters

|  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 |

Example

Input

{
  paddingLeft: 20,
  marginRight: '25px',
  cursor: 'w-resize',
  textShadow: 'red 2px 0'
}

Output

{
  paddingRight: 20,
  marginleft: '25px',
  cursor: 'e-resize',
  textShadow: 'red -2px 0'
}

Theme-Based Mode

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' } })

License

Fela is licensed under the MIT License. Documentation is licensed under Creative Commons License. Created with ♥ by @robinweser and all the great contributors.