@hanamura/rcgen/dist/templates/useMediaQueries.ts.tmpl.js

Generate optimized React container components from configuration

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = render;
function render(_config) {
    return `// generated by static-generator
'use client'

import { useState, useEffect } from 'react'

/**
 * Hook for creating responsive container components that adapt to breakpoints
 *
 * This hook handles media query matching and option merging to enable
 * responsive behavior in container components.
 *
 * @param queries - Array of media query definitions with associated keys
 * @param defaultValue - Default value to return if no media queries match
 * @returns The active context key or the default value
 *
 * @typeParam T - Type for the return value
 * @typeParam K - Type for breakpoint keys (e.g. 'mobile', 'tablet', 'desktop')
 */
export function useMediaQueries<T extends unknown, K extends string = string>(
  queries: { name: K; query: string }[],
  defaultValue: T
): K | T {
  const [matches, setMatches] = useState<K | T>(defaultValue)

  useEffect(() => {
    if (typeof window === 'undefined') return

    const mediaQueryLists = queries.map(({ name, query }) => ({
      name,
      mql: window.matchMedia(query),
    }))

    function updateMatches() {
      const match = mediaQueryLists.findLast(({ mql }) => mql.matches)

      if (match) {
        setMatches(match.name)
      } else {
        setMatches(defaultValue)
      }
    }

    mediaQueryLists.forEach(({ mql: mediaQueryList }) => {
      mediaQueryList.addEventListener('change', updateMatches)
    })

    updateMatches()

    return () => {
      mediaQueryLists.forEach(({ mql: mediaQueryList }) => {
        mediaQueryList.removeEventListener('change', updateMatches)
      })
    }
  }, [queries])

  return matches
}
`;
}