use-text-selection
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.5 • Public • Published

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

    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.

    Keywords

    none

    Install

    npm i use-text-selection

    DownloadsWeekly Downloads

    660

    Version

    1.1.5

    License

    MIT

    Unpacked Size

    8.83 kB

    Total Files

    8

    Last publish

    Collaborators

    • juliankrispel