Skip to content
On this page

useTextSelection

Category
Last Changed
2 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 Position: {"top":0,"right":0,"bottom":0,"left":0}

Selected Size: {"width":0,"height":0}

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

declare type Rect = Omit<DOMRectReadOnly, "x" | "y" | "toJSON">
export interface UseTextSelectionState extends Rect {
  text: string
}
export declare function useTextSelection(
  element?: MaybeRef<HTMLElement | Document | null | undefined>
): Ref<{
  text: string
  readonly left: number
  readonly right: number
  readonly top: number
  readonly bottom: number
  readonly width: number
  readonly height: number
}>
export declare type UseTextSelectionReturn = ReturnType<typeof useTextSelection>
declare type Rect = Omit<DOMRectReadOnly, "x" | "y" | "toJSON">
export interface UseTextSelectionState extends Rect {
  text: string
}
export declare function useTextSelection(
  element?: MaybeRef<HTMLElement | Document | null | undefined>
): Ref<{
  text: string
  readonly left: number
  readonly right: number
  readonly top: number
  readonly bottom: number
  readonly width: number
  readonly height: number
}>
export declare type UseTextSelectionReturn = ReturnType<typeof useTextSelection>

Source

SourceDemoDocs

Contributors

Anthony Fu
wheat
webfansplz

Changelog

v7.3.0 on 12/12/2021
0b83b - feat: new function (#1038)
useTextSelection has loaded