@codefast/ui 0.0.44 → 0.0.46

package/src/hooks/use-media-query.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export function useMediaQuery(query: string): boolean {
+  const [value, setValue] = React.useState(false);
+
+  React.useEffect(() => {
+    function onChange(event: MediaQueryListEvent): void {
+      setValue(event.matches);
+    }
+
+    const result = matchMedia(query);
+
+    result.addEventListener('change', onChange);
+    setValue(result.matches);
+
+    return () => {
+      result.removeEventListener('change', onChange);
+    };
+  }, [query]);
+
+  return value;
+}

package/src/hooks/use-mutation-observer.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export const useMutationObserver = (
+  ref: React.MutableRefObject<HTMLElement | null>,
+  callback: MutationCallback,
+  options: MutationObserverInit = {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  },
+): void => {
+  React.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const observer = new MutationObserver(callback);
+
+    observer.observe(ref.current, options);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref, callback, options]);
+};