Skip to content
On this page

useTextSelection

Category
Export Size
1.22 kB
Last Changed
10 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

html
<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
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 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
Lehoczky Zoltán
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)

Released under the MIT License.