Responsive

index.tsx

import React, { useState, useEffect, ReactNode } from "react"

export function useMediaQuery(query: string) {
  const [matches, setMatches] = useState(false)

  useEffect(() => {
    const media = window.matchMedia(query)
    if (media.matches !== matches) {
      setMatches(media.matches)
    }
    const listener = () => {
      setMatches(media.matches)
    }
    media.addEventListener("change", listener)
    return () => media.removeEventListener("change", listener)
  }, [matches, query])

  return matches
}

export function useIsWideScreen() {
  return useMediaQuery("(min-width: 768px)")
}

type Props = {
  children: ReactNode
}

export const OnlySmallScreen = ({ children }: Props) => (useIsWideScreen() ? null : <>{children}</>)

export const OnlyWideScreen = ({ children }: Props) => (useIsWideScreen() ? <>{children}</> : null)