useMediaQuery

A hook for detecting media query matches.

Installation

npx shadcn add https://darwin-ui.mandalsuraj.com/registry/use-media-query.json

Usage

import { useMediaQuery } from '@smc/darwin-ui';

export function Example() {
  const isDesktop = useMediaQuery('(min-width: 1024px)');
  const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');

  return (
    <div>
      {isDesktop ? 'Desktop view' : 'Mobile view'}
    </div>
  );
}

API Reference

function useMediaQuery(query: string): boolean;

Parameter	Type	Description
query	string	CSS media query

Returns: boolean - Whether the query matches