convert useHover hook to TS

Author: nikasepiskveradze

src/pages/useHover.md

@@ -4,6 +4,7 @@ title: useHover
 date: "2018-10-30"
 gist: https://gist.github.com/gragland/cfc4089e2f5d98dde5033adc44da53f8
 sandbox: https://codesandbox.io/s/01w2zmj010
+isMultilingual: true
 links:
   - url: https://gist.github.com/gragland/a32d08580b7e0604ff02cb069826ca2f
     name: useHover with callback ref
@@ -51,3 +52,42 @@ function useHover() {
   return [ref, value];
 }
 ```
+
+```typescript
+// Usage
+function App() {
+  const [hoverRef, isHovered] = useHover<HTMLDivElement>();
+
+  return <div ref={hoverRef}>{isHovered ? "😁" : "☹️"}</div>;
+}
+
+// Hook
+// T - could be any type of HTML element like: HTMLDivElement, HTMLParagraphElement and etc.
+// hook returns tuple(array) with type [any, boolean]
+function useHover<T>(): [any, boolean] {
+  const [value, setValue] = useState<boolean>(false); 
+
+  const ref: any = useRef<T | null>(null);
+
+  const handleMouseOver = (): void => setValue(true);
+  const handleMouseOut = (): void => setValue(false);
+
+  useEffect(
+    () => {
+      const node: any = ref.current;
+      if (node) {
+        node.addEventListener("mouseover", handleMouseOver);
+        node.addEventListener("mouseout", handleMouseOut);
+
+        return () => {
+          node.removeEventListener("mouseover", handleMouseOver);
+          node.removeEventListener("mouseout", handleMouseOut);
+        };
+      }
+    },
+    [ref.current] // Recall only if ref changes
+  );
+
+  return [ref, value];
+}
+```