A hook for getting the state of your current text selection
npm install use-text-selectionReact 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.
``tsx
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 (
left: clientRect.x,
top: clientRect.y + clientRect.height,
position: 'absolute',
}}
>
Autocomplete
$3
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:
`tsx
const MyTextSelectionComponent = () => {
const [ref, setRef] = useRef()
const { clientRect, isCollapsed } = useTextSelection(ref.current) if (clientRect == null) return null
return (
<>
setRef(el)}>
left: clientRect.x,
top: clientRect.y + clientRect.height,
position: 'absolute',
}}
>
Autocomplete
I build editors for companies, or help their teams do so. Hit me up on my website to get in touch about a project.