Source from repo

VueUse Functions

Apply VueUse composables in Vue 3/Nuxt projects to replace custom implementations with battle-tested utilities.

antfuGitHub antfuSource repo Original GitHub link Publisher page

Files

268

Skill

n/a

Size

631.0 KB

Entrypoint

SKILL.md

Format

git-repo

Open file

references/useTextDirection.md

Syntax-highlighted preview of this file as included in the skill package.

Rendered Source

markdown76 linesFree

references/useTextDirection.md

1---
2category: Browser
3---
4 
5# useTextDirection
6 
7Reactive [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) of the element's text.
8 
9## Usage
10 
11```ts
12import { useTextDirection } from '@vueuse/core'
13 
14const dir = useTextDirection() // Ref<'ltr' | 'rtl' | 'auto'>
15```
16 
17By default, it returns `rtl` direction when dir `rtl` is applied to the `html` tag, for example:
18 
19```html
20<!--ltr-->
21<html>
22  ...
23</html>
24 
25<!--rtl-->
26<html dir="rtl">
27  ...
28</html>
29```
30 
31## Options
32 
33```ts
34import { useTextDirection } from '@vueuse/core'
35 
36const mode = useTextDirection({
37  selector: 'body'
38}) // Ref<'ltr' | 'rtl' | 'auto'>
39```
40 
41## Type Declarations
42 
43```ts
44export type UseTextDirectionValue = "ltr" | "rtl" | "auto"
45export interface UseTextDirectionOptions extends ConfigurableDocument {
46  /**
47   * CSS Selector for the target element applying to
48   *
49   * @default 'html'
50   */
51  selector?: string
52  /**
53   * Observe `document.querySelector(selector)` changes using MutationObserve
54   *
55   * @default false
56   */
57  observe?: boolean
58  /**
59   * Initial value
60   *
61   * @default 'ltr'
62   */
63  initialValue?: UseTextDirectionValue
64}
65/**
66 * Reactive dir of the element's text.
67 *
68 * @see https://vueuse.org/useTextDirection
69 *
70 * @__NO_SIDE_EFFECTS__
71 */
72export declare function useTextDirection(
73  options?: UseTextDirectionOptions,
74): WritableComputedRef<UseTextDirectionValue, UseTextDirectionValue>
75```
76

Preparing the source view

VueUse Functions

references/useTextDirection.md