https://github.com/alejandrorm-dev/react-media-queries
react-media-queries is a React hooks library that provides useful custom hooks for responsive design and media queries.
https://github.com/alejandrorm-dev/react-media-queries
react
Last synced: 7 months ago
JSON representation
react-media-queries is a React hooks library that provides useful custom hooks for responsive design and media queries.
- Host: GitHub
- URL: https://github.com/alejandrorm-dev/react-media-queries
- Owner: AlejandroRM-DEV
- License: mit
- Created: 2024-08-30T00:02:44.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-24T04:24:47.000Z (almost 2 years ago)
- Last Synced: 2025-01-31T21:11:28.794Z (over 1 year ago)
- Topics: react
- Language: JavaScript
- Homepage:
- Size: 481 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Media Queries
[](#contributors-)
A lightweight, performant React hooks library for responsive design and media query management. Built with TypeScript and optimized for modern React applications, including SSR support.
## Table of Contents
- [Features](#features)
- [Installation](#installation)
- [Demo](#demo)
- [Usage](#usage)
- [API Reference](#api-reference)
- [SSR Support](#ssr-support)
- [License](#license)
- [Contributing](#contributing)
- [Contributors](#contributors-)
## Features
- 🚀 **Performant**: Uses `useSyncExternalStore` for optimal performance and React 18+ compatibility
- 🔄 **SSR Compatible**: Handles server-side rendering gracefully
- 🎯 **TypeScript**: Full TypeScript support with type definitions
- 🪝 **Hooks-Based**: Modern React hooks API
- ⚡ **Efficient**: Shared stores prevent duplicate media query listeners
## Installation
```bash
npm install @alejandrorm-dev/react-media-queries
```
## Demo
https://github.com/user-attachments/assets/dd7719a8-a3bd-4da5-93c2-126bdfc8ceb7
## Usage
```typescript
import { useMediaQuery } from "@alejandrorm-dev/react-media-queries";
function ResponsiveComponent() {
const isLargeScreen = useMediaQuery("(min-width: 1200px)");
return (
{isLargeScreen ? "Large screen layout" : "Small screen layout"}
);
}
```
## API Reference
### `useMediaQuery(query: string): boolean`
Evaluates a single CSS media query and returns its current match state.
**Parameters:**
- `query` (string): The CSS media query string to evaluate (e.g., `"(min-width: 768px)"`)
**Returns:** `boolean` - `true` if the media query matches, `false` otherwise. Returns `false` during SSR.
**Example:**
```typescript
const isTablet = useMediaQuery("(min-width: 768px) and (max-width: 1024px)");
```
## SSR Support
The hook is designed to work seamlessly in server-side rendering environments. During SSR, `useMediaQuery` returns `false`. On the client, the value updates to reflect the actual media query state.
## License
This project is licensed under the MIT License.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## Contributors ✨
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
