listen to caret position of an input

useCaretPosition.tsx

const useCaretPosition = () => {
  const [caret, setCaret] = useState({
    selectionStart: 0,
    selectionEnd: 0,
  });

  const onEvent = useCallback((e) => {
    const input = e.target;

    setCaret({
      selectionStart: input.selectionStart,
      selectionEnd: input.selectionEnd
    });
  }, []);

  const events = {
    onClick: onEvent,
    onKeyUp: onEvent,
    onFocus: onEvent,
  }

  return [caret, events];
}