{"id":13912665,"url":"https://github.com/airbnb/react-with-direction","last_synced_at":"2025-09-04T17:13:24.337Z","repository":{"id":23744516,"uuid":"99744178","full_name":"airbnb/react-with-direction","owner":"airbnb","description":"Components to provide and consume RTL or LTR direction in React","archived":false,"fork":false,"pushed_at":"2023-03-04T02:10:44.000Z","size":49,"stargazers_count":192,"open_issues_count":9,"forks_count":30,"subscribers_count":26,"default_branch":"master","last_synced_at":"2024-05-02T01:15:56.479Z","etag":null,"topics":["directionality","higher-order-component","hoc","left-to-right","ltr","provider","react","right-to-left","rtl"],"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/airbnb.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2017-08-08T23:15:17.000Z","updated_at":"2024-04-22T13:14:18.000Z","dependencies_parsed_at":"2022-08-07T11:00:45.153Z","dependency_job_id":"7d557006-035f-4bb5-ae28-7ca5c39e6623","html_url":"https://github.com/airbnb/react-with-direction","commit_stats":{"total_commits":46,"total_committers":8,"mean_commits":5.75,"dds":0.4130434782608695,"last_synced_commit":"d6a8523379df6b27a6271b96cf0224741c1e5620"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbnb%2Freact-with-direction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbnb%2Freact-with-direction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbnb%2Freact-with-direction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/airbnb%2Freact-with-direction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/airbnb","download_url":"https://codeload.github.com/airbnb/react-with-direction/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225234847,"owners_count":17442223,"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":["directionality","higher-order-component","hoc","left-to-right","ltr","provider","react","right-to-left","rtl"],"created_at":"2024-08-07T01:01:40.393Z","updated_at":"2024-11-25T22:30:43.418Z","avatar_url":"https://github.com/airbnb.png","language":"JavaScript","readme":"# react-with-direction \u003csup\u003e[![Version Badge][npm-version-svg]][package-url]\u003c/sup\u003e\n\n[![Build Status][travis-svg]][travis-url]\n[![dependency status][deps-svg]][deps-url]\n[![dev dependency status][dev-deps-svg]][dev-deps-url]\n[![License][license-image]][license-url]\n[![Downloads][downloads-image]][downloads-url]\n\n[![npm badge][npm-badge-png]][package-url]\n\nComponents to support both right-to-left (RTL) and left-to-right (LTR) layouts in React.\n\nSupporting RTL or switching between different directions can be tricky. Most browsers have [built-in support](https://www.w3.org/International/questions/qa-html-dir) for displaying markup like paragraphs, lists, and tables. But what about interactive or complex custom UI components? In a right-to-left layout, a photo carousel should advance in the opposite direction, and the primary tab in a navigation control should the rightmost, for example.\n\nThis package provides components to simplify that effort.\n\n## withDirection\n\nUse `withDirection` when your component needs to change based on the layout direction. `withDirection` is an HOC that consumes the direction from React context and passes it as a `direction` prop to the wrapped component. The wrapped component can then pivot its logic to accommodate each direction.\n\nUsage example:\n\n```js\nimport withDirection, { withDirectionPropTypes, DIRECTIONS } from 'react-with-direction';\n\nfunction ForwardsLabel({ direction }) {\n  return (\n    \u003cdiv\u003e\n      Forwards\n      {direction === DIRECTIONS.LTR \u0026\u0026 \u003cimg src=\"arrow-right.png\" /\u003e}\n      {direction === DIRECTIONS.RTL \u0026\u0026 \u003cimg src=\"arrow-left.png\" /\u003e}\n    \u003c/div\u003e\n  );\n}\nForwardsLabel.propTypes = {\n  ...withDirectionPropTypes,\n};\n\nexport default withDirection(ForwardsLabel);\n```\n\n## DirectionProvider\n\nUse `DirectionProvider` at the top of your app to set the direction context, which can then be consumed by components using `withDirection`.\n\nYou should set the `direction` prop based on the language of the content being rendered; for example, `DIRECTIONS.RTL` (right-to-left) for Arabic or Hebrew, or `DIRECTIONS.LTR` (left-to-right) for English or most other languages.\n\n`DirectionProvider` components can also be nested, so that the direction can be overridden for certain branches of the React tree.\n\n`DirectionProvider` will render its children inside of a `\u003cdiv\u003e` element with a `dir` attribute set to match the `direction` prop, for example: `\u003cdiv dir=\"rtl\"\u003e`. This maintains consistency when being rendered in a browser. To render inside of a `\u003cspan\u003e` instead of a div, set the `inline` prop to `true`.\n\nUsage example:\n\n```js\nimport DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';\n```\n\n```jsx\n\u003cDirectionProvider direction={DIRECTIONS.RTL}\u003e\n  \u003cdiv\u003e\n    \u003cForwardsLabel /\u003e\n  \u003c/div\u003e\n\u003c/DirectionProvider\u003e\n```\n\nTo set the `lang` attribute on the wrapping element, provide the `lang` prop to `DirectionProvider`.\n\nUsage example:\n\n```jsx\nimport DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';\n\n\u003cDirectionProvider direction={DIRECTIONS.RTL} lang=\"ar\"\u003e\n  \u003cdiv\u003e\n    \u003cForwardsLabel /\u003e\n  \u003c/div\u003e\n\u003c/DirectionProvider\u003e\n```\n\nNote that `lang` and `direction` are independent – `lang` only sets the attribute on the wrapping element.\n\n## AutoDirectionProvider\n\nUse `AutoDirectionProvider` around, for example, user-generated content where the text direction is unknown or may change. This renders a `DirectionProvider` with the `direction` prop automatically set based on the `text` prop provided.\n\nDirection will be determined based on the first strong LTR/RTL character in the `text` string. Strings with no strong direction (e.g., numbers) will inherit the direction from its nearest `DirectionProvider` ancestor or default to LTR.\n\nUsage example:\n\n```js\nimport AutoDirectionProvider from 'react-with-direction/dist/AutoDirectionProvider';\n```\n\n```js\n\u003cAutoDirectionProvider text={userGeneratedContent}\u003e\n  \u003cExampleComponent\u003e\n    {userGeneratedContent}\n  \u003c/ExampleComponent\u003e\n\u003c/AutoDirectionProvider\u003e\n```\n\n`AutoDirectionProvider` also supports the `lang` prop in the same way as `DirectionProvider` does.\n\n[package-url]: https://npmjs.org/package/react-with-direction\n[npm-version-svg]: http://versionbadg.es/airbnb/react-with-direction.svg\n[travis-svg]: https://travis-ci.org/airbnb/react-with-direction.svg\n[travis-url]: https://travis-ci.org/airbnb/react-with-direction\n[deps-svg]: https://david-dm.org/airbnb/react-with-direction.svg\n[deps-url]: https://david-dm.org/airbnb/react-with-direction\n[dev-deps-svg]: https://david-dm.org/airbnb/react-with-direction/dev-status.svg\n[dev-deps-url]: https://david-dm.org/airbnb/react-with-direction#info=devDependencies\n[npm-badge-png]: https://nodei.co/npm/react-with-direction.png?downloads=true\u0026stars=true\n[license-image]: http://img.shields.io/npm/l/react-with-direction.svg\n[license-url]: LICENSE\n[downloads-image]: http://img.shields.io/npm/dm/react-with-direction.svg\n[downloads-url]: http://npm-stat.com/charts.html?package=react-with-direction\n","funding_links":[],"categories":["react"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fairbnb%2Freact-with-direction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fairbnb%2Freact-with-direction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fairbnb%2Freact-with-direction/lists"}