Add font settings

packages/web/src/utils/useEvent.ts

@@ -0,0 +1,51 @@
+import { useEffect } from "react"
+
+type UseEventListenerOptions = boolean | AddEventListenerOptions
+
+export { useEventListener }
+
+type On<This, Ev> = {
+  on(listener: (this: This, ev: Ev) => void, deps?: any[]): void
+}
+
+interface UseEventListener {
+  <K extends keyof MediaQueryListEventMap>(
+    mediaQueryList: MediaQueryList,
+    type: K,
+    options?: UseEventListenerOptions
+  ): On<MediaQueryList, MediaQueryListEventMap[K]>
+  <K extends keyof WindowEventMap>(
+    window: Window,
+    type: K,
+    options?: UseEventListenerOptions
+  ): On<Window, WindowEventMap[K]>
+  <K extends keyof DocumentEventMap>(
+    document: Document,
+    type: K,
+    options?: UseEventListenerOptions
+  ): On<Document, DocumentEventMap[K]>
+  <K extends keyof HTMLElementEventMap>(
+    element: HTMLElement,
+    type: K,
+    options?: UseEventListenerOptions
+  ): On<HTMLElement, HTMLElementEventMap[K]>
+}
+
+const useEventListener: UseEventListener = function useEventListener(
+  element: EventTarget,
+  type: string,
+  options?: UseEventListenerOptions
+) {
+  return {
+    on(listener: (ev: any) => any, deps?: any[]) {
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useEffect(
+        () => {
+          element.addEventListener(type, listener, options)
+          return () => element.removeEventListener(type, listener, options)
+        },
+        deps ? [element, type, ...deps] : undefined
+      )
+    },
+  }
+}