useTextSelection

Demo

You can select any text on the page.

Selected Text:No selected

Selected rects:

[]

Usage

vue

<script setup lang="ts">
import { useTextSelection } from '@vueuse/core'
const state = useTextSelection()
</script>

<template>
  <p>{{ state.text }}</p>
</template>

Type Declarations

Show Type Declarations

typescript

/**
 * Reactively track user text selection based on [`Window.getSelection`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection).
 *
 * @see https://vueuse.org/useTextSelection
 */
export declare function useTextSelection(options?: ConfigurableWindow): {
  text: ComputedRef<string>
  rects: ComputedRef<DOMRect[]>
  ranges: ComputedRef<Range[]>
  selection: Ref<
    {
      readonly anchorNode: Node | null
      readonly anchorOffset: number
      readonly direction: string
      readonly focusNode: Node | null
      readonly focusOffset: number
      readonly isCollapsed: boolean
      readonly rangeCount: number
      readonly type: string
      addRange: (range: Range) => void
      collapse: (node: Node | null, offset?: number) => void
      collapseToEnd: () => void
      collapseToStart: () => void
      containsNode: (node: Node, allowPartialContainment?: boolean) => boolean
      deleteFromDocument: () => void
      empty: () => void
      extend: (node: Node, offset?: number) => void
      getRangeAt: (index: number) => Range
      modify: (alter?: string, direction?: string, granularity?: string) => void
      removeAllRanges: () => void
      removeRange: (range: Range) => void
      selectAllChildren: (node: Node) => void
      setBaseAndExtent: (
        anchorNode: Node,
        anchorOffset: number,
        focusNode: Node,
        focusOffset: number,
      ) => void
      setPosition: (node: Node | null, offset?: number) => void
      toString: () => string
    } | null,
    | Selection
    | {
        readonly anchorNode: Node | null
        readonly anchorOffset: number
        readonly direction: string
        readonly focusNode: Node | null
        readonly focusOffset: number
        readonly isCollapsed: boolean
        readonly rangeCount: number
        readonly type: string
        addRange: (range: Range) => void
        collapse: (node: Node | null, offset?: number) => void
        collapseToEnd: () => void
        collapseToStart: () => void
        containsNode: (node: Node, allowPartialContainment?: boolean) => boolean
        deleteFromDocument: () => void
        empty: () => void
        extend: (node: Node, offset?: number) => void
        getRangeAt: (index: number) => Range
        modify: (
          alter?: string,
          direction?: string,
          granularity?: string,
        ) => void
        removeAllRanges: () => void
        removeRange: (range: Range) => void
        selectAllChildren: (node: Node) => void
        setBaseAndExtent: (
          anchorNode: Node,
          anchorOffset: number,
          focusNode: Node,
          focusOffset: number,
        ) => void
        setPosition: (node: Node | null, offset?: number) => void
        toString: () => string
      }
    | null
  >
}
export type UseTextSelectionReturn = ReturnType<typeof useTextSelection>