# react-with-direction

> Components to provide and consume RTL or LTR direction in React

Latest version **1.4.0** (published 2021-10-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-with-direction
pnpm add react-with-direction
yarn add react-with-direction
bun add react-with-direction
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2021-10-11 |
| First published | 2017-08-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 40.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 190 |
| Author | Yaniv Zimet |
| Maintainers | airbnbeng, lencioni, etienne_tripier, noratarano, ljharb, brucewpaul, yzimet |

## Links

- npm: https://www.npmjs.com/package/react-with-direction
- Repository: https://github.com/airbnb/react-with-direction
- Homepage: https://github.com/airbnb/react-with-direction#readme
- Issues: https://github.com/airbnb/react-with-direction/issues
- npm.io page: https://npm.io/package/react-with-direction

## Dependencies (8)

- [brcast](https://npm.io/package/brcast.md) ^2.0.2
- [deepmerge](https://npm.io/package/deepmerge.md) ^1.5.2
- [direction](https://npm.io/package/direction.md) ^1.0.4
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [object.assign](https://npm.io/package/object.assign.md) ^4.1.2
- [object.values](https://npm.io/package/object.values.md) ^1.1.5
- [airbnb-prop-types](https://npm.io/package/airbnb-prop-types.md) ^2.16.0
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.2

## Recent versions

- 1.4.0 (latest) — 2021-10-11
- 1.3.1 — 2019-08-30
- 1.3.0 — 2018-01-30
- 1.2.0 — 2018-01-18
- 1.1.0 — 2017-10-16
- 1.0.1 — 2017-08-23
- 1.0.0 — 2017-08-08

## README

# react-with-direction <sup>[![Version Badge][npm-version-svg]][package-url]</sup>

[![Build Status][travis-svg]][travis-url]
[![dependency status][deps-svg]][deps-url]
[![dev dependency status][dev-deps-svg]][dev-deps-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]

[![npm badge][npm-badge-png]][package-url]

Components to support both right-to-left (RTL) and left-to-right (LTR) layouts in React.

Supporting 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.

This package provides components to simplify that effort.

## withDirection

Use `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.

Usage example:

```js
import withDirection, { withDirectionPropTypes, DIRECTIONS } from 'react-with-direction';

function ForwardsLabel({ direction }) {
  return (
    <div>
      Forwards
      {direction === DIRECTIONS.LTR && <img src="arrow-right.png" />}
      {direction === DIRECTIONS.RTL && <img src="arrow-left.png" />}
    </div>
  );
}
ForwardsLabel.propTypes = {
  ...withDirectionPropTypes,
};

export default withDirection(ForwardsLabel);
```

## DirectionProvider

Use `DirectionProvider` at the top of your app to set the direction context, which can then be consumed by components using `withDirection`.

You 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.

`DirectionProvider` components can also be nested, so that the direction can be overridden for certain branches of the React tree.

`DirectionProvider` will render its children inside of a `<div>` element with a `dir` attribute set to match the `direction` prop, for example: `<div dir="rtl">`. This maintains consistency when being rendered in a browser. To render inside of a `<span>` instead of a div, set the `inline` prop to `true`.

Usage example:

```js
import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';
```

```jsx
<DirectionProvider direction={DIRECTIONS.RTL}>
  <div>
    <ForwardsLabel />
  </div>
</DirectionProvider>
```

To set the `lang` attribute on the wrapping element, provide the `lang` prop to `DirectionProvider`.

Usage example:

```jsx
import DirectionProvider, { DIRECTIONS } from 'react-with-direction/dist/DirectionProvider';

<DirectionProvider direction={DIRECTIONS.RTL} lang="ar">
  <div>
    <ForwardsLabel />
  </div>
</DirectionProvider>
```

Note that `lang` and `direction` are independent – `lang` only sets the attribute on the wrapping element.

## AutoDirectionProvider

Use `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.

Direction 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.

Usage example:

```js
import AutoDirectionProvider from 'react-with-direction/dist/AutoDirectionProvider';
```

```js
<AutoDirectionProvider text={userGeneratedContent}>
  <ExampleComponent>
    {userGeneratedContent}
  </ExampleComponent>
</AutoDirectionProvider>
```

`AutoDirectionProvider` also supports the `lang` prop in the same way as `DirectionProvider` does.

[package-url]: https://npmjs.org/package/react-with-direction
[npm-version-svg]: http://versionbadg.es/airbnb/react-with-direction.svg
[travis-svg]: https://travis-ci.org/airbnb/react-with-direction.svg
[travis-url]: https://travis-ci.org/airbnb/react-with-direction
[deps-svg]: https://david-dm.org/airbnb/react-with-direction.svg
[deps-url]: https://david-dm.org/airbnb/react-with-direction
[dev-deps-svg]: https://david-dm.org/airbnb/react-with-direction/dev-status.svg
[dev-deps-url]: https://david-dm.org/airbnb/react-with-direction#info=devDependencies
[npm-badge-png]: https://nodei.co/npm/react-with-direction.png?downloads=true&stars=true
[license-image]: http://img.shields.io/npm/l/react-with-direction.svg
[license-url]: LICENSE
[downloads-image]: http://img.shields.io/npm/dm/react-with-direction.svg
[downloads-url]: http://npm-stat.com/charts.html?package=react-with-direction

---
_Source: https://npm.io/package/react-with-direction · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._