⬅️ Back to Table of Contents

📄 useTextDirection

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	7
🟢 Vue Composition API	1
📐 Interfaces	1
📑 Type Aliases	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useTextDirection/index.ts

📦 Imports

Name	Source
ConfigurableDocument	../_configurable
MaybeElement	../unrefElement
tryOnMounted	@vueuse/shared
computed	vue
shallowRef	vue
defaultDocument	../_configurable
useMutationObserver	../useMutationObserver

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none

---

Functions

useTextDirection(options: UseTextDirectionOptions): any

Reactive dir of the element's text.

See: https://vueuse.org/useTextDirection

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Reactive dir of the element's text.
 *
 * @see https://vueuse.org/useTextDirection
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

• document?.querySelector(selector)?.getAttribute
• shallowRef (from vue)
• getValue
• tryOnMounted (from @vueuse/shared)
• useMutationObserver (from ../useMutationObserver)
• document.querySelector
• computed (from vue)
• document.querySelector(selector)?.setAttribute
• document.querySelector(selector)?.removeAttribute

Code

export function useTextDirection(options: UseTextDirectionOptions = {}) {
  const {
    document = defaultDocument,
    selector = 'html',
    observe = false,
    initialValue = 'ltr',
  } = options

  function getValue() {
    return document?.querySelector(selector)?.getAttribute('dir') as UseTextDirectionValue ?? initialValue
  }

  const dir = shallowRef<UseTextDirectionValue>(getValue())

  tryOnMounted(() => dir.value = getValue())

  if (observe && document) {
    useMutationObserver(
      document.querySelector(selector) as MaybeElement,
      () => dir.value = getValue(),
      { attributes: true },
    )
  }

  return computed<UseTextDirectionValue>({
    get() {
      return dir.value
    },
    set(v) {
      dir.value = v
      if (!document)
        return
      if (dir.value)
        document.querySelector(selector)?.setAttribute('dir', dir.value)
      else
        document.querySelector(selector)?.removeAttribute('dir')
    },
  })
}

Internal helpers

Declared inside another function in this file.

getValue(): UseTextDirectionValue

Returns: UseTextDirectionValue

Calls:

• document?.querySelector(selector)?.getAttribute

Code

function getValue() {
    return document?.querySelector(selector)?.getAttribute('dir') as UseTextDirectionValue ?? initialValue
  }

---

Interfaces

UseTextDirectionOptions

Interface Code

export interface UseTextDirectionOptions extends ConfigurableDocument {
  /**
   * CSS Selector for the target element applying to
   *
   * @default 'html'
   */
  selector?: string
  /**
   * Observe `document.querySelector(selector)` changes using MutationObserve
   *
   * @default false
   */
  observe?: boolean
  /**
   * Initial value
   *
   * @default 'ltr'
   */
  initialValue?: UseTextDirectionValue
}

Properties

Name	Type	Optional	Description
selector	string	✓	not shown
observe	boolean	✓	not shown
initialValue	UseTextDirectionValue	✓	not shown

---

Type Aliases

UseTextDirectionValue

type UseTextDirectionValue = 'ltr' | 'rtl' | 'auto';

---

Generated by Syntax Scribe