use-text-selection

NOTE: This is a fork of use-text-selection that I will deprecate if the commonAncestor feature is merged into the original package.

React hook for tracking the state of the current text selection.

Useful when building any kind of UI that is displayed in relation to your text-selection. For example:

• Floating toolbars for richt text editing or content sharing.
• Autocomplete/suggestion featues in editors.

Basic usage

import { useRef } from 'react'
import { useTextSelection } from 'use-text-selection'

export const AutoComplete = () => {
  const { clientRect, isCollapsed } = useTextSelection()
  // to constrain text selection events to an element
  // just add the element as a an argument like `useTextSelection(myElement)`

  if (clientRect == null) return null

  return (
    <div
      style={{
        left: clientRect.x,
        top: clientRect.y + clientRect.height,
        position: 'absolute',
      }}
    >
      Autocomplete
    </div>
  );
}}

Constraining text selection events to an element

useTextSelection takes one argument called, which would be a dom element which constrains updates to inside the dom element.

Retrieve a reference to this dom element with the querySelector api or with React refs (recommended).

Here's an example:

const MyTextSelectionComponent = () => {
  const [ref, setRef] = useRef()
  const { clientRect, isCollapsed } = useTextSelection(ref.current)

  if (clientRect == null) return null

  return (
    <>
      <div ref={(el) => setRef(el)}>
        <MyOtherComponent>
      </div>

      <div
        style={{
          left: clientRect.x,
          top: clientRect.y + clientRect.height,
          position: 'absolute',
        }}
      >
        Autocomplete
      </div>
    </>
  );
}

Accessing the Common Ancestor

You can access the closest, common ancestor to all elements within the selection with the closestAncestor return value. This is forwarded directly from the commonAncestorContainer from the text range.

const { clientRect, isCollapsed, commonAncestor } = useTextSelection(ref.current);

Work with me?

I build editors for companies, or help their teams do so. Hit me up on my website to get in touch about a project.