Creating text selection ui with use-text-selection

April 06, 2021

use-text-selection is a little react hook that gives you the position and dimensions, as well as the text content of a text selection.

You can use this with react based editing frameworks such as slate.js or draft.js or just by itself - depending on your usecase.

With this data you can create UI like the floating medium rich text menu:

Or autocomplete UI like you’d find in an IDE:

However, this UI doesn’t have to be inside an editable text area. You can apply it to any text area, like mediums share/annotate menu when you select text:

And here’s how simple it is to use:

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

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

  return <MyComponent
    style={{ left: clientRect.x, top: clientRect.y }}
  />
}

You can find the github repository here along with a basic example. The package is on npm too.