implement useClickAway

packages/useclickaway/__tests__/useclickaway.test.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { useClickAway } from '../src';
+
+describe('@artifak/useclickaway', () => {
+  const onClickAway = jest.fn();
+
+  const Dummy = () => {
+    const ref: React.RefObject<HTMLDivElement> = React.createRef();
+
+    useClickAway(ref, onClickAway);
+
+    const onClick = () => {
+      console.log('Clicked');
+    };
+
+    return (
+      <div>
+        Wrapper
+        <div ref={ref} onClick={onClick}>
+          Click Me
+        </div>
+      </div>
+    );
+  };
+
+  it('calls the clickAway callback when click event occurs on non-target ref', () => {
+    render(<Dummy />);
+
+    const Wrapper = screen.getByText('Wrapper');
+
+    Wrapper.focus();
+    Wrapper.click();
+
+    expect(onClickAway).toHaveBeenCalled();
+  });
+});

packages/useclickaway/src/index.ts

@@ -1,3 +1,18 @@
-export function useClickAway() {
-  // TODO
+import { useEffect, RefObject } from 'react';
+
+export function useClickAway(
+  ref: RefObject<HTMLElement | null>,
+  onClickAway: (e: Event) => void
+) {
+  const handleClick = (e: Event) => {
+    ref.current && !ref.current.contains(e.target as Node) && onClickAway(e);
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+
+    return function unmountUseClickAway() {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [ref]);
 }