feat(hooks): build local useBreakpointValue and useMediaQuery hooks

Author: TylerAPfledderer

src/hooks/useBreakpointValue.ts

@@ -0,0 +1,51 @@
+import { screens } from "../../tailwind/screens"
+
+import { useMediaQuery } from "./useMediaQuery"
+
+const breakpointMap = {
+  // Essentially to query from no width if smaller than "sm"
+  base: "0px",
+  ...screens,
+}
+
+type BreakpointKeys = keyof typeof breakpointMap
+
+export const useBreakpointValue = <T = unknown>(
+  values: Partial<Record<BreakpointKeys, T>>,
+  fallbackBreakpoint?: BreakpointKeys
+): T => {
+  const breakpointKeys = Object.keys(values) as BreakpointKeys[]
+
+  let fallbackPassed = false
+
+  const setBreakpoints = Object.entries(breakpointMap)
+    .map(([breakpoint, value]) => {
+      const item = {
+        breakpoint,
+        query: `(min-width: ${value})`,
+        fallback: !fallbackPassed,
+      }
+
+      if (breakpoint === fallbackBreakpoint) {
+        fallbackPassed = true
+      }
+
+      return item
+    })
+    .filter(({ breakpoint }) =>
+      breakpointKeys.includes(breakpoint as BreakpointKeys)
+    )
+
+  const fallbackQueries = setBreakpoints.map(({ fallback }) => fallback)
+
+  const queryValues = useMediaQuery(
+    setBreakpoints.map((bp) => bp.query),
+    fallbackQueries
+  )
+
+  const index = queryValues.lastIndexOf(true)
+
+  const breakpointPicked = breakpointKeys[index]
+
+  return values[breakpointPicked] as T
+}

src/hooks/useMediaQuery.ts

@@ -0,0 +1,63 @@
+import { useState } from "react"
+
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect"
+
+const IS_SERVER = typeof window === "undefined"
+
+/**
+ * Modified from https://usehooks-ts.com/react-hook/use-media-query
+ * to account for an array of queries.
+ *
+ * Modifications sourced from Chakra-UI.
+ * https://github.com/chakra-ui/chakra-ui/blob/main/packages/hooks/src/use-media-query.ts
+ */
+export function useMediaQuery(
+  queries: string[],
+  fallbackQueries?: boolean[]
+): boolean[] {
+  const _fallbackQueries = fallbackQueries?.filter(
+    (val) => val !== null
+  ) as boolean[]
+
+  const [value, setValue] = useState(() => {
+    return queries.map((query, idx) => ({
+      media: query,
+      matches: !IS_SERVER
+        ? window.matchMedia(query).matches
+        : !!_fallbackQueries[idx],
+    }))
+  })
+
+  useIsomorphicLayoutEffect(() => {
+    const matchMedias = queries.map((query) => window.matchMedia(query))
+
+    // Handles the change event of the media query.
+    function handleChange(evt: MediaQueryListEvent) {
+      setValue((prev) => {
+        return prev.slice().map((item) => {
+          if (item.media === evt.media) return { ...item, matches: evt.matches }
+          return item
+        })
+      })
+      return
+    }
+
+    const cleanups = matchMedias.map((v) => listen(v, handleChange))
+    return () => cleanups.forEach((fn) => fn())
+  }, [queries])
+
+  return value.map((item) => item.matches)
+}
+
+type MediaQueryCallback = (event: MediaQueryListEvent) => void
+
+function listen(query: MediaQueryList, callback: MediaQueryCallback) {
+  // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+  try {
+    query.addEventListener("change", callback)
+    return () => query.removeEventListener("change", callback)
+  } catch (e) {
+    query.addListener(callback)
+    return () => query.removeListener(callback)
+  }
+}

tailwind.config.ts

@@ -1,6 +1,8 @@
 import type { Config } from "tailwindcss"
 import plugin from "tailwindcss/plugin"
 
+import { screens } from "./tailwind/screens"
+
 const config = {
   darkMode: ["selector", "[data-theme='dark']"],
   content: [
@@ -11,13 +13,7 @@ const config = {
   prefix: "",
   theme: {
     extend: {
-      screens: {
-        sm: "480px",
-        md: "768px",
-        lg: "992px",
-        xl: "1280px",
-        "2xl": "1536px",
-      },
+      screens,
       fontFamily: {
         heading: "var(--font-inter)",
         body: "var(--font-inter)",

tailwind/screens.ts

@@ -0,0 +1,9 @@
+import type { ScreensConfig } from "tailwindcss/types/config"
+
+export const screens = {
+  sm: "480px",
+  md: "768px",
+  lg: "992px",
+  xl: "1280px",
+  "2xl": "1536px",
+} satisfies ScreensConfig