https://github.com/bamieh/react-inline-styler-processor-rtl
RTL processor for React inline styler
https://github.com/bamieh/react-inline-styler-processor-rtl
inline-styles react react-inline-styler rtl rtl-processor
Last synced: about 1 year ago
JSON representation
RTL processor for React inline styler
- Host: GitHub
- URL: https://github.com/bamieh/react-inline-styler-processor-rtl
- Owner: Bamieh
- License: mit
- Created: 2017-03-29T17:32:58.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-02-01T16:17:56.000Z (over 8 years ago)
- Last Synced: 2025-04-20T16:40:28.557Z (about 1 year ago)
- Topics: inline-styles, react, react-inline-styler, rtl, rtl-processor
- Language: JavaScript
- Size: 83 KB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/react-inline-styler-processor-rtl)
[](https://travis-ci.org/Bamieh/react-inline-styler-processor-rtl)
[](https://coveralls.io/github/Bamieh/react-inline-styler-processor-rtl?branch=master)
[](https://opensource.org/licenses/MIT)
# react-inline-styler-processor-rtl
(Right to left / left to right) dynamic inline styles processing.
RTL processor for React inline styler [react-inline-styler](https://github.com/Bamieh/react-inline-styler)
This processor adds new syntax for the inline styles mainly, "start" and "end" which are dynamically changed to left or right depending on the wanted app language direction, by specifing `isRTL` in the `ReactInlineStylerProvider`.
# Getting started
```
npm install react-inline-styler-processor-rtl
```
# Example Usage
```
//App.js
import rtlProcessor from 'react-inline-styler-processor-rtl'
// or var rtlProcessor = require('react-inline-styler-processor-rtl')
const pipeline = [rtlProcessor];
const configs = {isRTL: true};
```
```
//styles.js
const styles = function() {
return {
rootStyle: {
float: 'start',
paddingStart: ...
}
}
}
```
# Localization list
localizing styles happens on the key of the attibute, or its value. in LTR configurations start is translated into "left" and "end" is translated into "right". in RTL, the other way around.
### Localed Values
1. float
```
{
float: 'start',
float: 'end',
}
```
2. direction
```
{
direction: 'start',
direction: 'end',
}
```
3. transformOrigin
```
{
transformOrigin: 'start',
transformOrigin: 'end',
}
```
4. transform
```
{
transform: translate
transform: skew
}
```
5. textAlign
`text-align` values' `start` and `end` are supported in all browers but not in IE11+ and Edge. Therefore, this transform was added.
```
{
textAlign: 'start'
textAlign: 'end'
}
```
### Localed Keys
1. margins and paddings
```
{
marginStart: ...
marginEnd: ...
paddingStart: ...
paddingEnd: ...
}
```
2. positions
```
{
start: ...
end: ...
}
```
3. borders
```
{
borderStart: ...
borderStartWidth: ...
borderStartStyle: ...
borderStartColor: ...
borderEnd: ...
borderEndWidth: ...
borderEndStyle: ...
borderEndColor: ...
}
```
4. borderRadius
```
{
borderTopStartRadius: ...
borderTopEndRadius: ...
borderBottomStartRadius: ...
borderBottomEndRadius: ...
}
```