{"id":15883723,"url":"https://github.com/0xch4z/styled-queries","last_synced_at":"2026-05-07T18:44:40.132Z","repository":{"id":115265022,"uuid":"101797006","full_name":"0xch4z/styled-queries","owner":"0xch4z","description":"💫 A simple interface for styled-component queries. Media queries for the component age.","archived":false,"fork":false,"pushed_at":"2019-05-29T06:04:04.000Z","size":4858,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-26T13:50:37.406Z","etag":null,"topics":["css-in-js","react","styled-components"],"latest_commit_sha":null,"homepage":null,"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/0xch4z.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-29T19:07:52.000Z","updated_at":"2023-06-02T20:18:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"94a6fdf3-f70e-4377-991f-ae88a356f1fd","html_url":"https://github.com/0xch4z/styled-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/0xch4z%2Fstyled-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xch4z%2Fstyled-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xch4z%2Fstyled-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xch4z%2Fstyled-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xch4z","download_url":"https://codeload.github.com/0xch4z/styled-queries/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246763945,"owners_count":20829799,"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":["css-in-js","react","styled-components"],"created_at":"2024-10-06T04:24:03.694Z","updated_at":"2026-05-07T18:44:35.083Z","avatar_url":"https://github.com/0xch4z.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\u003cimg height=\"30\" src=\"https://raw.githubusercontent.com/Charliekenney23/styled-queries/master/assets/react.png\"\u003eStyled Queries\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  A tool for use with \u003ca href=\"https://github.com/styled-components/styled-components\"\u003estyled-components\u003c/a\u003e! Media queries for the component age.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/Charliekenney23/styled-queries/master/assets/demo.gif\"\u003e\n\u003c/p\u003e\n\n\u003ch2\u003eWhat's the point? 🤷‍♂️\u003c/h2\u003e\n\nThis tool offers a simpler interface for writing out media queries in *styled* tagged templates. It comes with some simple [predifined breakpoints](#default-queries-), the ability to inject your own [configuration](#configuring-) and some convenient [query-helpers](#query-helpers-) to help you target specific breakpoints.\n\n\u003ch2\u003eGetting started 🚀\u003c/h2\u003e\nFirst things first, install the npm package via the npm cli.\n\n```bash\n  $ npm install --save styled-queries\n```\n\n\u003ch2\u003eUsage 📝\u003c/h2\u003e\n\nUsing Style Queries with your React-Styled project is extremely easy. Simply, `import` the `styled-queries` package into your React component of choice and use interpolation inside of your *styled* tagged template to access the media query breakpoints via dot notation.\n\nThe default import is an object containing functions returning media query wrappers. This is what you will be interfacing with to make media queries simpler.\n\nHere's an example:\n\n```js\nimport React, { Component } from 'react';\nimport styled from 'styled-components';\nimport { media } from 'styled-queries';\n\nconst Div = styled.div`\n  color: #fff !important;\n  height: 100vh;\n  ${media.sm`background: #90caf9;`}\n  ${media.md`background: #e040fb;`}\n  ${media.lg`background: #5c6bc0;`}\n  ${media.xsOnly`font-family: comic-sans;`}\n`;\n\nexport default () =\u003e (\n  \u003cDiv\u003e\n    \u003ch1\u003eHello, World!\u003c/h1\u003e\n  \u003c/Div\u003e\n)\n```\n\u003ch2\u003eQuery helpers ✅\u003c/h2\u003e\n\nAs you can see, the API provides `[size]Only` query-helpers for all breakpoints automatically, even for ones you inject with your configuration. These are calculated dynamically by getting the difference of each breakpoint's respecitve width.\n\n```js\nconst XxlOnlyBanner = styled`\n  display: none;\n  ${media.xxlOnly`display: block;`}\n`\n```\n\n\u003ch2\u003eDefault queries ㉿\u003c/h2\u003e\n\nStyled Queries comes with some pretty useful breakpoints out of the box. Keep in mind, you can choose add your own and remove these (see the [configuring](#configuring-) section for more details).\n\n```js\nconst defaultBreakpoints = {\n  xs: 320,\n  sm: 768,\n  md: 1224,\n  lg: 1400,\n  xl: 1824,\n};\n```\n\n\u003ch2\u003eConfiguring ⚒\u003c/h2\u003e\n\nIt's very easy to add your own configuration to your project. To get started with configuring your own breakpoints, import the `makeQueries` function from `styled-queries`. \n\n`makeQueries` takes two parameters:\n1. `{boolean}` Describes whether or not to inject default breakpoints. [Default: `true`] \n2. `{object}` Describes a breakpoint and its min-width (where its width is an `{integer}`). [Default: `null`]\n\nTo keep things neat, one might dedicate a file in the `utils` directory for exporting a custom config of Styled Queries globally throughout the project. Here's an example:\n\n**./utils/media-queries.js**\n\n```js\nimport { makeQueries } from 'styled-queries'\n\nexport default makeQueries(true, {\n  xxs: 200,\n  xxl: 2000,\n})\n```\n\n**./pages/index.js**\n\n```js\nimport media from '../utils/media-queries'\n\nconst Grid = styled`\n  display: flex;\n  flex-wrap: wrap;\n  background: #9e0;\n  width: 90%;\n  ${media.md`width: 80%;`}\n  ${media.lg`width: 60%;`}\n`\n```\n\n\u003ch2\u003eEnjoy! ✌️\u003c/h2\u003e\n\nI hope you make awesome things with style-components and styled-queries!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xch4z%2Fstyled-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xch4z%2Fstyled-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xch4z%2Fstyled-queries/lists"}