Skip to content
On this page

useTextSelection

Category
Last Changed
3 months ago

Reactively track user text selection based on Window.getSelection.

Demo

You can select any text on the page.

Selected Text:No selected

Selected rects: []

Usage

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

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

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

Type Declarations

Show Type Declarations
/**
 * 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 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 | undefined) => void
    collapseToEnd: () => void
    collapseToStart: () => void
    containsNode: (
      node: Node,
      allowPartialContainment?: boolean | undefined
    ) => boolean
    deleteFromDocument: () => void
    empty: () => void
    extend: (node: Node, offset?: number | undefined) => void
    getRangeAt: (index: number) => Range
    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 | undefined) => void
    toString: () => string
  } | null>
}
export declare type UseTextSelectionReturn = ReturnType<typeof useTextSelection>
/**
 * 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 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 | undefined) => void
    collapseToEnd: () => void
    collapseToStart: () => void
    containsNode: (
      node: Node,
      allowPartialContainment?: boolean | undefined
    ) => boolean
    deleteFromDocument: () => void
    empty: () => void
    extend: (node: Node, offset?: number | undefined) => void
    getRangeAt: (index: number) => Range
    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 | undefined) => void
    toString: () => string
  } | null>
}
export declare type UseTextSelectionReturn = ReturnType<typeof useTextSelection>

Source

SourceDemoDocs

Contributors

Anthony Fu
wheat
Jelf
webfansplz

Changelog

v8.0.0-beta.1 on 3/5/2022
2a877 - fix: ssr compactible
v7.7.1 on 3/5/2022
bc3da - fix!: listen to selectionchange event (#1194)
v7.3.0 on 12/12/2021
0b83b - feat: new function (#1038)
useTextSelection has loaded