@fela-next/fela-plugin-rtl NPM

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-next/fela'
import rtl from '@fela-next/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 Common License. Created with ♥ by @robinweser and all the great contributors.

@fela-next/fela fela-plugin rtl accessibility

4 years ago

4 years ago

4 years ago