{"id":15047035,"url":"https://github.com/bamieh/react-inline-styler-processor-rtl","last_synced_at":"2025-05-15T12:31:23.207Z","repository":{"id":65373095,"uuid":"86610982","full_name":"Bamieh/react-inline-styler-processor-rtl","owner":"Bamieh","description":"RTL processor for React inline styler","archived":false,"fork":false,"pushed_at":"2018-02-01T16:17:56.000Z","size":85,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-20T16:40:28.557Z","etag":null,"topics":["inline-styles","react","react-inline-styler","rtl","rtl-processor"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bamieh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-29T17:32:58.000Z","updated_at":"2017-12-05T22:41:53.000Z","dependencies_parsed_at":"2023-01-19T23:45:45.481Z","dependency_job_id":null,"html_url":"https://github.com/Bamieh/react-inline-styler-processor-rtl","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bamieh%2Freact-inline-styler-processor-rtl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bamieh%2Freact-inline-styler-processor-rtl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bamieh%2Freact-inline-styler-processor-rtl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bamieh%2Freact-inline-styler-processor-rtl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bamieh","download_url":"https://codeload.github.com/Bamieh/react-inline-styler-processor-rtl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254341100,"owners_count":22054982,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inline-styles","react","react-inline-styler","rtl","rtl-processor"],"created_at":"2024-09-24T20:53:53.873Z","updated_at":"2025-05-15T12:31:22.190Z","avatar_url":"https://github.com/Bamieh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/react-inline-styler-processor-rtl.svg)](https://badge.fury.io/js/react-inline-styler-processor-rtl)\n[![Build Status](https://travis-ci.org/Bamieh/react-inline-styler-processor-rtl.svg?branch=master)](https://travis-ci.org/Bamieh/react-inline-styler-processor-rtl)\n[![Coverage Status](https://coveralls.io/repos/github/Bamieh/react-inline-styler-processor-rtl/badge.svg?branch=master)](https://coveralls.io/github/Bamieh/react-inline-styler-processor-rtl?branch=master)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n\n# react-inline-styler-processor-rtl\n\n(Right to left / left to right) dynamic inline styles processing.\n\nRTL processor for React inline styler [react-inline-styler](https://github.com/Bamieh/react-inline-styler)\n\n\nThis 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`.\n\n\n# Getting started\n\n```\nnpm install react-inline-styler-processor-rtl\n```\n\n# Example Usage\n\n```\n//App.js\n\nimport rtlProcessor from 'react-inline-styler-processor-rtl'\n// or var rtlProcessor = require('react-inline-styler-processor-rtl')\n\nconst pipeline = [rtlProcessor];\nconst configs = {isRTL: true};\n\n\u003cReactInlineStylerProvider configs={configs} pipeline={pipeline}\u003e\n\u003c/ReactInlineStylerProvider\u003e\n```\n\n```\n//styles.js\nconst styles = function() {\n  return {\n    rootStyle: {\n      float: 'start',\n      paddingStart: ...\n    }\n  }\n}\n```\n\n# Localization list\n\nlocalizing 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. \n\n### Localed Values\n\n1. float\n\n```\n{\n  float: 'start',\n  float: 'end',\n}\n```\n\n2. direction\n\n```\n{\n  direction: 'start',\n  direction: 'end',\n}\n```\n\n3. transformOrigin\n\n```\n{\n  transformOrigin: 'start',\n  transformOrigin: 'end',\n}\n```\n\n\n4. transform\n```\n{\n  transform: translate\n  transform: skew\n}\n```\n5. textAlign\n\n  `text-align` values' `start` and `end` are supported in all browers but not in IE11+ and Edge. Therefore, this transform was added.\n```\n{\n  textAlign: 'start'\n  textAlign: 'end'\n}\n```\n### Localed Keys\n\n1. margins and paddings\n\n```\n{\n  marginStart: ...\n  marginEnd: ...\n  paddingStart: ...\n  paddingEnd: ...\n}\n```\n\n2. positions\n```\n{\n  start: ...\n  end: ...\n}\n```\n\n3. borders\n\n```\n{\n  borderStart: ...\n  borderStartWidth: ...\n  borderStartStyle: ...\n  borderStartColor: ...\n  borderEnd: ...\n  borderEndWidth: ...\n  borderEndStyle: ...\n  borderEndColor: ...\n}\n```\n\n\n4. borderRadius\n```\n{\n  borderTopStartRadius: ...\n  borderTopEndRadius: ...\n  borderBottomStartRadius: ...\n  borderBottomEndRadius: ...\n}\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbamieh%2Freact-inline-styler-processor-rtl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbamieh%2Freact-inline-styler-processor-rtl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbamieh%2Freact-inline-styler-processor-rtl/lists"}