{"_id":"@alejandrorm-dev/react-media-queries","_rev":"3-92b9b685cf686d1acc169b8dd81dce22","name":"@alejandrorm-dev/react-media-queries","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.1":{"name":"@alejandrorm-dev/react-media-queries","version":"1.0.1","keywords":["react","hooks","state management","effects"],"author":{"name":"Alejandro Ramírez Muñoz"},"license":"MIT","_id":"@alejandrorm-dev/react-media-queries@1.0.1","maintainers":[{"name":"alejandrorm-dev","email":"alejandror45@gmail.com"}],"homepage":"https://github.com/AlejandroRM-DEV/react-media-queries#readme","bugs":{"url":"https://github.com/AlejandroRM-DEV/react-media-queries/issues"},"dist":{"shasum":"3c4ccf94b42852f21c16246c968c7b8f8518b7f3","tarball":"https://registry.npmjs.org/@alejandrorm-dev/react-media-queries/-/react-media-queries-1.0.1.tgz","fileCount":27,"integrity":"sha512-ofLNbcUx1XYxnzEMjFf5b0/mgY0Ar2m7xoz/2T2kn+Oj5Hw9adJwboPZ9ZZv7eK0QvZxreDGHMNjVP/rQNzMEw==","signatures":[{"sig":"MEQCIDcdBfGngQTAcvRIxrZaYIEBecnjaYvRkaPv4nlQow9rAiAUdmYH9auwmfqbtOEgXB33TZlVzI3pnZiMZR3oFtedaw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":173535},"main":"index.js","type":"module","gitHead":"282f7bb2dfb3a9252e08eef1f9d467e0144f4eb7","private":false,"scripts":{"lint":"eslint .","test":"vitest","format":"prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"","release":"release-it","lint:fix":"eslint . --fix"},"_npmUser":{"name":"alejandrorm-dev","email":"alejandror45@gmail.com"},"repository":{"url":"git+https://github.com/AlejandroRM-DEV/react-media-queries.git","type":"git"},"_npmVersion":"8.19.4","description":"React hooks library that provides useful custom hooks for responsive design and media queries.","directories":{},"_nodeVersion":"16.20.2","browserslist":[">0.2%","not dead","not op_mini all"],"dependencies":{"jsdom":"^25.0.0","react":"^16.14.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^9.9.1","vitest":"^2.0.5","globals":"^15.9.0","prettier":"^3.3.3","@eslint/js":"^9.9.1","release-it":"^17.6.0","@commitlint/cli":"^19.4.0","eslint-plugin-react":"^7.35.0","react-test-renderer":"^16.14.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@testing-library/jest-dom":"^6.5.0","@typescript-eslint/parser":"^8.3.0","@testing-library/react-hooks":"^8.0.1","@commitlint/config-conventional":"^19.2.2","@typescript-eslint/eslint-plugin":"^8.3.0","@release-it/conventional-changelog":"^8.0.1"},"peerDependencies":{"react":">=16.14.0"},"_npmOperationalInternal":{"tmp":"tmp/react-media-queries_1.0.1_1725062347294_0.4252587385046349","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@alejandrorm-dev/react-media-queries","version":"1.0.2","keywords":["react","hooks","state management","effects"],"author":{"name":"Alejandro Ramírez Muñoz"},"license":"MIT","_id":"@alejandrorm-dev/react-media-queries@1.0.2","maintainers":[{"name":"alejandrorm-dev","email":"alejandror45@gmail.com"}],"homepage":"https://github.com/AlejandroRM-DEV/react-media-queries#readme","bugs":{"url":"https://github.com/AlejandroRM-DEV/react-media-queries/issues"},"dist":{"shasum":"f1d810527ee085a2e818c9377e7855f1e15ff979","tarball":"https://registry.npmjs.org/@alejandrorm-dev/react-media-queries/-/react-media-queries-1.0.2.tgz","fileCount":27,"integrity":"sha512-NXcQnnOOA2O45i/KbF0wilj80zYBc6weGygWWghtbdpJkhW3Oy3JPaHWtc2FfGVNVkVaueW1i2PXGIMtSjn8Vw==","signatures":[{"sig":"MEQCIF+LLTqIot0hC1zATMH+49oThjsb9d6sV/B5+gO6K7mSAiA0PTnYRVShxaIm+1q+Jv2RKr8yCPxCXNjO4aQp1GyuJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":174287},"main":"index.js","type":"module","gitHead":"e1156a8786297bac2db6b10f88b34626480fbf27","private":false,"scripts":{"lint":"eslint .","test":"vitest","format":"prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"","release":"release-it","lint:fix":"eslint . --fix"},"_npmUser":{"name":"alejandrorm-dev","email":"alejandror45@gmail.com"},"repository":{"url":"git+https://github.com/AlejandroRM-DEV/react-media-queries.git","type":"git"},"_npmVersion":"8.19.4","description":"React hooks library that provides useful custom hooks for responsive design and media queries.","directories":{},"_nodeVersion":"16.20.2","browserslist":[">0.2%","not dead","not op_mini all"],"dependencies":{"jsdom":"^25.0.0","react":"^16.14.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"eslint":"^9.9.1","vitest":"^2.0.5","globals":"^15.9.0","prettier":"^3.3.3","@eslint/js":"^9.9.1","release-it":"^17.6.0","@commitlint/cli":"^19.4.0","eslint-plugin-react":"^7.35.0","react-test-renderer":"^16.14.0","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.2.1","@testing-library/jest-dom":"^6.5.0","@typescript-eslint/parser":"^8.3.0","@testing-library/react-hooks":"^8.0.1","@commitlint/config-conventional":"^19.2.2","@typescript-eslint/eslint-plugin":"^8.3.0","@release-it/conventional-changelog":"^8.0.1"},"peerDependencies":{"react":">=16.14.0"},"_npmOperationalInternal":{"tmp":"tmp/react-media-queries_1.0.2_1725063822055_0.21388437149132278","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@alejandrorm-dev/react-media-queries","version":"2.0.0","private":false,"description":"React hooks library that provides useful custom hooks for responsive design and media queries.","main":"index.js","type":"module","scripts":{"test":"vitest","release":"release-it","lint":"biome check .","lint:fix":"biome check --write .","format":"biome format --write ."},"author":{"name":"Alejandro Ramírez Muñoz"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/AlejandroRM-DEV/react-media-queries.git"},"bugs":{"url":"https://github.com/AlejandroRM-DEV/react-media-queries/issues"},"homepage":"https://github.com/AlejandroRM-DEV/react-media-queries#readme","keywords":["react","hooks","state management","effects"],"devDependencies":{"@biomejs/biome":"^2.3.6","@release-it/conventional-changelog":"^8.0.1","@testing-library/dom":"^10.4.1","@testing-library/jest-dom":"^6.5.0","@testing-library/react":"^16.3.0","@types/node":"^24.10.1","@types/react":"^19.2.6","release-it":"^17.6.0","typescript":"^5.9.3","vitest":"^2.0.5"},"dependencies":{"jsdom":"^25.0.0","react":">=18.0.0"},"peerDependencies":{"react":">=18.0.0"},"browserslist":[">0.2%","not dead","not op_mini all"],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_id":"@alejandrorm-dev/react-media-queries@2.0.0","gitHead":"5241bfca464f0f90d2f2661dd1073a6cf4b825b5","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-FWP63xP1YhM373Rx9xFxwMH/ZCxBTfgzQdjIuFC2KJimosnu+/4pP2+E6ENUlKYiGkcufg6U3zBXNrUYNyWXow==","shasum":"13a5a7bc40e32cd21bcfdf39b18f2b413b00f465","tarball":"https://registry.npmjs.org/@alejandrorm-dev/react-media-queries/-/react-media-queries-2.0.0.tgz","fileCount":15,"unpackedSize":25710,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIDccK2bR5J4OlKWeM3AFLBoJRGfns88uNw1uD3KnLzVeAiBkrI4AmYgzGuCCUdIBdCUDz0MOphfjfD2pv5TJv15ZuA=="}]},"_npmUser":{"name":"alejandrorm-dev","email":"alejandror45@gmail.com"},"directories":{},"maintainers":[{"name":"alejandrorm-dev","email":"alejandror45@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-media-queries_2.0.0_1763614773822_0.41949481467080374"},"_hasShrinkwrap":false}},"time":{"created":"2024-08-30T23:59:07.209Z","modified":"2025-11-20T04:59:34.272Z","1.0.1":"2024-08-30T23:59:07.488Z","1.0.2":"2024-08-31T00:23:42.223Z","2.0.0":"2025-11-20T04:59:34.047Z"},"bugs":{"url":"https://github.com/AlejandroRM-DEV/react-media-queries/issues"},"author":{"name":"Alejandro Ramírez Muñoz"},"license":"MIT","homepage":"https://github.com/AlejandroRM-DEV/react-media-queries#readme","keywords":["react","hooks","state management","effects"],"repository":{"type":"git","url":"git+https://github.com/AlejandroRM-DEV/react-media-queries.git"},"description":"React hooks library that provides useful custom hooks for responsive design and media queries.","maintainers":[{"name":"alejandrorm-dev","email":"alejandror45@gmail.com"}],"readme":"# React Media Queries\n\n![Build Status](https://img.shields.io/github/actions/workflow/status/AlejandroRM-DEV/react-media-queries/release.yml?branch=main)\n![npm version](https://img.shields.io/npm/v/@alejandrorm-dev/react-media-queries)\n![npm](https://img.shields.io/npm/dw/@alejandrorm-dev/react-media-queries)\n![License](https://img.shields.io/badge/license-MIT-blue)\n![GitHub issues](https://img.shields.io/github/issues/AlejandroRM-DEV/react-media-queries)\n![GitHub forks](https://img.shields.io/github/forks/AlejandroRM-DEV/react-media-queries)\n![GitHub stars](https://img.shields.io/github/stars/AlejandroRM-DEV/react-media-queries)\n[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)\n\nA lightweight, performant React hooks library for responsive design and media query management. Built with TypeScript and optimized for modern React applications, including SSR support.\n\n## Table of Contents\n\n- [Features](#features)\n- [Installation](#installation)\n- [Demo](#demo)\n- [Usage](#usage)\n- [API Reference](#api-reference)\n- [SSR Support](#ssr-support)\n- [License](#license)\n- [Contributing](#contributing)\n- [Contributors](#contributors-)\n\n## Features\n\n- 🚀 **Performant**: Uses `useSyncExternalStore` for optimal performance and React 18+ compatibility\n- 🔄 **SSR Compatible**: Handles server-side rendering gracefully\n- 🎯 **TypeScript**: Full TypeScript support with type definitions\n- 🪝 **Hooks-Based**: Modern React hooks API\n- ⚡ **Efficient**: Shared stores prevent duplicate media query listeners\n\n## Installation\n\n```bash\nnpm install @alejandrorm-dev/react-media-queries\n```\n\n## Demo\n\nhttps://github.com/user-attachments/assets/dd7719a8-a3bd-4da5-93c2-126bdfc8ceb7\n\n## Usage\n\n```typescript\nimport { useMediaQuery } from \"@alejandrorm-dev/react-media-queries\";\n\nfunction ResponsiveComponent() {\n\tconst isLargeScreen = useMediaQuery(\"(min-width: 1200px)\");\n\n\treturn (\n\t\t
{isLargeScreen ? \"Large screen layout\" : \"Small screen layout\"}
\n\t);\n}\n```\n\n## API Reference\n\n### `useMediaQuery(query: string): boolean`\n\nEvaluates a single CSS media query and returns its current match state.\n\n**Parameters:**\n\n- `query` (string): The CSS media query string to evaluate (e.g., `\"(min-width: 768px)\"`)\n\n**Returns:** `boolean` - `true` if the media query matches, `false` otherwise. Returns `false` during SSR.\n\n**Example:**\n\n```typescript\nconst isTablet = useMediaQuery(\"(min-width: 768px) and (max-width: 1024px)\");\n```\n\n## SSR Support\n\nThe 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.\n\n## License\n\nThis project is licensed under the MIT License.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\n\n\n\n \n \n \n \n \n
\"Alejandro
Alejandro Ramírez Muñoz
💻 ⚠️
\n\n\n\n\n\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md"}