matches
Returns whether the media query currently matches.
Hook
useMediaQuery
The useMediaQuery hook lets you detect whether a CSS media query matches the current viewport. Its useful for building responsive React components without manually listening for resize events.
Import
import { useMediaQuery } from "@shivms/ui";API
The hook accepts a media query and returns whether it currently matches.
query
Accepts any valid CSS media query string.
Responsive
Automatically updates when the viewport changes.
Basic Usage
Pass any valid CSS media query and use the returned boolean to render responsive layouts.
import { useMediaQuery } from "@shivms/ui";
export default function App() {
const isMobile = useMediaQuery(
"(max-width: 768px)"
);
return (
<div>
{isMobile
? "Mobile View"
: "Desktop View"}
</div>
);
}Features
01
Responsive Layouts
Render different components based on screen size.
02
Live Updates
Automatically reacts whenever the viewport size changes.
03
Simple API
Use any valid CSS media query with a single hook call.
Continue Reading
Explore more SHIVMS UI documentation and guides.
Learn what SHIVMS UI is and how to begin.
Install the library into your project.
Reusable React hooks for state, themes and responsiveness.
Use built-in icons throughout your application.
Configure light and dark themes.
Reusable helper functions for everyday development.
Build accessible user interfaces.
Customize colors, spacing and components.
See what's new in each release.