All files / src/components/ui/hooks use-ime-is-composing.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1x
 
1x
6x
 
6x
6x
 
6x
3x
 
3x
3x
3x
 
 
3x
3x
3x
 
 
 
3x
 
 
 
 
6x
 
 
import { RefObject, useCallback, useEffect, useState } from "react";
 
export const useIMEIsComposing = (inputRef: RefObject<HTMLInputElement>) => {
  const [isComposing, setComposition] = useState(false);
 
  const onCompositionStart = useCallback(() => setComposition(true), []);
  const onCompositionEnd = useCallback(() => setComposition(false), []);
 
  useEffect(() => {
    const inputElement = inputRef.current;
 
    if (inputElement) {
      inputElement.addEventListener("compositionstart", onCompositionStart);
      inputElement.addEventListener("compositionend", onCompositionEnd);
    }
 
    return () => {
      if (inputElement) {
        inputElement.removeEventListener(
          "compositionstart",
          onCompositionStart,
        );
        inputElement.removeEventListener("compositionend", onCompositionEnd);
      }
    };
  }, [inputRef, onCompositionStart, onCompositionEnd]);
 
  return isComposing;
};