{"id":20638894,"url":"https://github.com/merri/react-use-queries","last_synced_at":"2025-04-15T22:22:13.413Z","repository":{"id":57347179,"uuid":"226101589","full_name":"Merri/react-use-queries","owner":"Merri","description":"[Buggy on Firefox] React hook for media queries on window and any container element. NOTE: Container Queries seem to be coming to browsers in 2022!","archived":false,"fork":false,"pushed_at":"2019-12-16T08:57:47.000Z","size":74,"stargazers_count":8,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T21:03:35.374Z","etag":null,"topics":["breakpoints","container-queries","container-query","element-queries","element-query","matchmedia","react","react-hooks"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Merri.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-12-05T12:51:38.000Z","updated_at":"2022-05-18T12:24:52.000Z","dependencies_parsed_at":"2022-09-19T12:00:25.642Z","dependency_job_id":null,"html_url":"https://github.com/Merri/react-use-queries","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Freact-use-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Freact-use-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Freact-use-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Merri%2Freact-use-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Merri","download_url":"https://codeload.github.com/Merri/react-use-queries/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249162041,"owners_count":21222585,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["breakpoints","container-queries","container-query","element-queries","element-query","matchmedia","react","react-hooks"],"created_at":"2024-11-16T15:20:32.700Z","updated_at":"2025-04-15T22:22:13.395Z","avatar_url":"https://github.com/Merri.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-use-queries\n[![Version](https://img.shields.io/npm/v/react-use-queries.svg)](https://www.npmjs.com/package/react-use-queries)\n[![NPM-Size](https://flat.badgen.net/bundlephobia/minzip/react-use-queries)](https://www.npmjs.com/package/react-use-queries)\n\nThis React hook makes it easy for you to match with your media queries. Be it window or **any container element**!\n\n**Get it**: `npm install react-use-queries --save`\n\n\u003e tiny ✔️ efficient ✔️ fast ✔️ powerful ✔️ cross-browser ✔️\u003cbr /\u003e\n\u003e dependencies ❌ polyfills ❌ ResizeObserver ❌\n\n## What?\n\nGiven things you want to do with your media queries you can ask for a list of things that match!\n\n```jsx\nconst queries = {\n    '(max-width: 299px)': { thing: 'A' },\n    '(min-width: 300px) and (max-width: 599px)': { thing: 'B' },\n    '(min-width: 600px)': { thing: 'C' }\n}\n\nfunction ResponsiveComponent() {\n    const [things] = useQueries(queries, global)\n    // server side: = []\n    // client side: = [{ thing: 'A' }]\n    //          or: = [{ thing: 'B' }]\n    //          or: = [{ thing: 'C' }]\n    return (\n        \u003cdiv\u003e\n            Things that match:\n            \u003cpre\u003e{JSON.stringify(things, null, 4)}\u003c/pre\u003e\n        \u003c/div\u003e\n    )\n}\n```\n\n### Global?\n\nThe `global` there is actually `window`, but Babel handles `global` so that both server and client side code can work!\nYou can use `window` if you're dealing with client-only codebase (and don't have anything to fix `global` for you).\n\n### What about elements?\n\nIn this case you can omit use of the second parameter, but you must then place a `mediaQueryListener` element inside a container element.\n\n```jsx\nimport React, { useMemo } from 'react'\nimport useQueries from 'react-use-queries'\n\n// define this outside component to keep the same reference\n// or if you need this to be dynamic: useMemo\nconst queries = {\n    '(max-width: 299px)': 'small',\n    '(min-width: 300px) and (max-width: 599px)': 'medium',\n    '(min-width: 600px)': 'large'\n}\n\nconst positionRelative = { position: relative }\n\nfunction ResponsiveComponent() {\n    const [[size = 'default'], mediaQueryListener] = useQueries(queries)\n\n    // for demo purposes set a width that is smaller than the viewport width\n    const style = useMemo(() =\u003e ({ width: '50%', ...positionRelative }), [positionRelative])\n\n    return (\n        \u003cdiv style={style}\u003e\n            {mediaQueryListener}\n            \u003ch2\u003eSize is \u003ccode\u003e{size}\u003c/code\u003e\u003c/h2\u003e\n        \u003c/div\u003e\n    )\n}\n```\n\n`mediaQueryListener` is a single `\u003ciframe src=\"about:blank\" /\u003e` element.\n\n### Can I use this with Styled Components?\n\n[Yes, here is a demo](https://codesandbox.io/s/demo-react-use-querties-with-styled-components-ccy44)!\n\n### Caveats\n\nFor the media queries (or container queries) to work on elements you must give a containing element a style that is not\n`static` (or `initial`). Most commonly this means applying `position: relative;`. This is required, because a\n[trick originating from 2013 used for element resize detection](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/) is used here in a modern\nflavor, but instead of detecting resize we use `matchMedia` instead. The `mediaQueryListener` element is an `\u003ciframe /\u003e`\nwith url set to `about:blank`. Then this iframe element is sized to full size of it's parent by absolute positioning,\nhence requirement for `position` other than `static`.\n\nAll current container query solutions have issues with circularity: `react-use-queries` does nothing to protect against these, so you should always make sure your styles don't cause unintended side-effects. For example, changing parent element's border can change it's size which can then result to infinite resize loop as each style changes the content size. Also, parent element's size shouldn't be determined by it's children's size.\n\n### Motivation\n\nYou know how annoying it is to control element sizes via media queries in CSS? Well, I hadn't found out about container\nqueries until just recently (around November 2019) and ended up reading and researching **a lot** on the topic. Also, I\nthink I got a pretty unique idea using `matchMedia` of the `about:blank` page instead of resize events. Another idea was\nto output array of matches, which I think is both clever and simple way to create a powerful hook for all sorts of media\nand container query needs.\n\n#### Inspiration and thanks\n\nI used the excellent [`react-resize-aware`](https://github.com/FezVrasta/react-resize-aware) as an inspiration for the\nminimal bundle size. Thanks to the author of that hook! Previusly I did some work creating\n[`use-element-query`](https://github.com/Merri/use-element-query), but it uses DOM mutations outside React and also has\na bit sloppier API. I ended up putting more effort into polishing this hook and even choosing a much better name.\n\n## Alternatives\n\n- [CSS Element Queries](http://marcj.github.io/css-element-queries/): type `[min-width~=\"size\"]` to CSS\n- [CQ Prolyfill](https://github.com/ausi/cq-prolyfill): write `:container` pseudo-selectors to your CSS\n- [EQCSS](https://elementqueries.com/): use `@element` queries in your CSS\n- [`container-query`](https://github.com/ZeeCoder/container-query): lets you have `@container` queries\n- [`react-measure`](https://www.npmjs.com/package/react-measure): get all sorts of measurements of an element\n- [`styled-container-query`](https://www.npmjs.com/package/styled-container-query): write `:container` with Styled\n  Components\n\nAnd finally, I recommend [`react-resize-aware`](https://github.com/FezVrasta/react-resize-aware) if you need to know\nabout element resizing and don't want to use `ResizeObserver` due to current state of browser support!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerri%2Freact-use-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmerri%2Freact-use-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerri%2Freact-use-queries/lists"}