fela-plugin-rtl

Fela plugin to convert styles to RTL

Usage no npm install needed!

<script type="module">
  import felaPluginRtl from 'https://cdn.skypack.dev/fela-plugin-rtl';
</script>

README

fela-plugin-rtl

npm version npm downloads Bundlephobia

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.