feat: add useFocus sensor

packages/web-api-hooks/src/index.ts

@@ -5,6 +5,7 @@ export { default as useDeviceOrientation } from './useDeviceOrientation';
 export { default as useDocumentReadiness } from './useDocumentReadiness';
 export { default as useDocumentVisibility } from './useDocumentVisibility';
 export { default as useEventListener } from './useEventListener';
+export { default as useFocus } from './useFocus';
 export { default as useGeolocation } from './useGeolocation';
 export { default as useInterval } from './useInterval';
 export { default as useLocalStorage } from './useLocalStorage';

packages/web-api-hooks/src/useFocus.ts

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+
+/**
+ * Tracks focus state of an element.
+ *
+ * @returns Whether the element has focus, and props to be spread over the element under observation.
+ *
+ * @example
+ * function Component() {
+ *   const [hasFocus, bindFocus] = useFocus();
+ *   // ...
+ *   return <ElementToObserve {...bindFocus} />;
+ * }
+ */
+export default function useFocus(): [
+  boolean,
+  Readonly<{
+    onFocus: () => void;
+    onBlur: () => void;
+  }>,
+] {
+  const [isFocused, setFocused] = useState(false);
+
+  return [
+    isFocused,
+    {
+      onFocus() {
+        setFocused(true);
+      },
+      onBlur() {
+        setFocused(false);
+      },
+    },
+  ];
+}