use-text-selection
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>
</>
);
}