Add canvas interface (#461)

components/custom/use-click-outside.tsx

@@ -0,0 +1,31 @@
+import { useEffect, RefObject } from 'react';
+
+type Handler = (event: MouseEvent | TouchEvent) => void;
+
+function useClickOutside<T extends HTMLElement = HTMLElement>(
+  ref: RefObject<T>,
+  handler: Handler,
+  mouseEvent: 'mousedown' | 'mouseup' = 'mousedown'
+): void {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      const el = ref?.current;
+
+      if (!el || el.contains((event?.target as Node) || null)) {
+        return;
+      }
+
+      handler(event);
+    };
+
+    document.addEventListener(mouseEvent, listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener(mouseEvent, listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler, mouseEvent]);
+}
+
+export default useClickOutside;