Use Media

tailark-base-ui/core-use-media

FreeHook

Tailark core use media hook

See it running

Open the demo on Tailark Base UI

tailark.com/blocks/core-use-media

This registry sends X-Frame-Options, so its page cannot be embedded here. The link is the same page the frame would have shown.

Install it

npx shadcn@latest add https://tailark.com/r/core-use-media.json

Source

core/hooks/use-media.tstailark.com/r/core-use-media.json

1'use client'
2 
3import { useState, useEffect } from 'react'
4 
5export function useMedia(query: string): boolean {
6    const [matches, setMatches] = useState(true)
7 
8    useEffect(() => {
9        const matchMedia = window.matchMedia(query)
10        setMatches(matchMedia.matches)
11 
12        const handleChange = () => setMatches(matchMedia.matches)
13 
14        matchMedia.addEventListener('change', handleChange)
15 
16        return () => {
17            matchMedia.removeEventListener('change', handleChange)
18        }
19    }, [query])
20 
21    return matches
22}

Files it writes

core/hooks/use-media.ts