Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Wix Design System (WDS)

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# Direction

The text direction of a value, one of `ltr`, `rtl`, or `auto`. Use it for a field that
sets which way content flows, mapping directly to the HTML `dir` attribute.

## Component

In your component code, import the `Direction` type from `@wix/editor-react-types`:

```ts
import type { Direction } from '@wix/editor-react-types';
```

At runtime it's one of a fixed set of string values:

```ts
type Direction = 'rtl' | 'ltr' | 'auto'
```

### Usage

Your code either consumes a value of type `Direction` or produces one:

::::tabs
:::Consumers
In a component that receives a `Direction`, pass it to the element's `dir`
attribute:

```tsx
import type { Direction } from '@wix/editor-react-types';

function Callout({ textDirection }: { textDirection?: Direction }) {
  return <div dir={textDirection}>...</div>;
}
```
:::
:::Producers
When your code produces a `Direction`, for a context or a function return, assign one
of `'ltr'`, `'rtl'`, or `'auto'`:

```ts
import type { Direction } from '@wix/editor-react-types';

const rtlLocales = ['ar', 'he', 'fa'];

const textDirection: Direction = rtlLocales.includes(locale) ? 'rtl' : 'ltr';
```
:::
::::

## Manifest

In your manifest, declare the field with the `direction` dataType:

```json
{ "dataType": "direction" }
```

### Declaration

Declare a `direction` field in one of these ways, depending on where the value comes from:

::::tabs
:::Data-property
Declare it as a data property when the Wix user should set the direction in a panel. It takes
`dataType`, `displayName`, and an optional `defaultValue`:

```json
{
  "textDirection": {
    "dataType": "direction",
    "displayName": "Text Direction",
    "defaultValue": "rtl"
  }
}
```
:::
:::Context-item
Declare it as a context item when your component supplies the direction to descendant
components. It takes just `dataType` and `displayName`:

```json
{
  "textDirection": {
    "dataType": "direction",
    "displayName": "Text Direction"
  }
}
```
:::
:::Function-parameter-and-return
Declare it on a function when the function accepts or returns a direction. It takes
`dataType` and an optional `displayName`, and a parameter may also set `optional`:

```json
{
  "parameters": [
    {
      "dataType": "direction",
      "displayName": "Text Direction"
    }
  ],
  "returns": {
    "dataType": "direction"
  }
}
```
:::
::::