A custom React hook for grabbing the caret position in an input field.
npm i use-caret-position
yarn add use-caret-position
src/app/index.js for common usage examples.
At a high-level, you pass the hook an input ref.
const x y getPosition getSelection =
You get an
y coordinate that you can use to display a marker with. I'd recommend using CSS variables for this. This is what the demos do.
getSelection are functions you can trigger whenever needed to update the
getPosition returns the position at
selectionStart for an input.
getSelection returns a midpoint between
selectionEnd for an input. It's tricky to provide an exact accurate
y for the caret in all scenarios so often you might need to adjust the positioning slightly with CSS transforms.
Package is built with
parcel-bundler. To get to work, use
To work with the test app, you'll also need to run
yarn dev from within
To work with the published node module directly, use
npm link in the root of the repo.
npm link use-caret-position within
Made in haste by @jh3y 2020 😅