useSelectionRange

useSelectionRange tracks the input selection range.

Install

To start using useSelectionRange, you can install the @react-awesome/use-selection-range library or you can import it directly from @react-awesome/components if you have installed it before. In your project directory, run the following command to install the dependencies:

npm i @react-awesome/use-selection-range

Usage

import { useSelectionRange } from '@react-awesome/use-selection-range'
 
const Example = () => {
  const ref = useRef(null)
  const { register } = useSelectionRange()
 
  const { caret } = useSelectionRange(ref.current)
 
  return <input ref={ref} placeholder="Type something..." />
}

Notes

useSelectionRange doesn't have effect on some special editable elements like div with contentEditable or textarea. Since div with contentEditable (or textarea) doesn't offer any selectionStart or selectionEnd to the callback.

import { useSelectionRange } from '@react-awesome/use-selection-range'
 
const NotWorkingExample = () => {
  const ref = useRef(null)
  const { register } = useSelectionRange()
 
  const { caret } = useSelectionRange(ref.current)
 
  return (
    <div ref={setRef} contentEditable>
      I cannot track the contentEditable div element
    </div>
  )
}

Parameters

The useSelectionRange takes the following parameters:

inputEl

• Type: HTMLInputElement