{"id":21935395,"url":"https://github.com/zeecoder/react-london-container-queries","last_synced_at":"2026-04-09T01:31:13.028Z","repository":{"id":66155358,"uuid":"118816880","full_name":"ZeeCoder/react-london-container-queries","owner":"ZeeCoder","description":null,"archived":false,"fork":false,"pushed_at":"2018-02-20T08:52:27.000Z","size":2680,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-01-03T16:25:26.979Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ZeeCoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-01-24T20:15:48.000Z","updated_at":"2018-02-14T09:09:32.000Z","dependencies_parsed_at":"2023-02-21T02:15:49.284Z","dependency_job_id":null,"html_url":"https://github.com/ZeeCoder/react-london-container-queries","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ZeeCoder/react-london-container-queries","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeeCoder%2Freact-london-container-queries","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeeCoder%2Freact-london-container-queries/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeeCoder%2Freact-london-container-queries/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeeCoder%2Freact-london-container-queries/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZeeCoder","download_url":"https://codeload.github.com/ZeeCoder/react-london-container-queries/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZeeCoder%2Freact-london-container-queries/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31581864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-29T00:19:54.822Z","updated_at":"2026-04-09T01:31:13.013Z","avatar_url":"https://github.com/ZeeCoder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-london-container-queries\n\nhttps://github.com/FormidableLabs/spectacle\n\n## Draft\n\n* separate questions (titles) from answers on separate pages\n\n* introduction: my name, employer, WICG\n* // Disclaimer: my opinions might not represent the opinion of the whole group\n* A word on how designing social content was part of the inspiration for me to\n  look for a solution.\n* ‎What is a Container Query?\n* basic description: container queries allow us to change styles based on a target\n  element's size.\n* ‎What does it do?\n* ‎Explain by comparing to media queries, where the implicit query target is the\n  viewport, while a container query has an explicit target. The same way media\n  queries apply styles in the context of the viewport, I believe container queries\n  should apply styles in the context of their target element. (in most cases you\n  probably want to avoid affecting the styles outside of the container boundaries.)\n* ‎but... what is a Container though?\n* ‎for the sake of simplicity I'll spare you the history on where container query\n  name comes from. A more react-like name would be: component-query, but that's just\n  not what we call it, since it's not a react-specific idea.\n* ‎What are container boundaries?\n* ‎example on nestable media component, and illustration on the theory on how scoping\n  would work.\n* Can I start using it today?\n* sort of. there are several plugins out there but if you're using react, I'd\n  advise you to use my solution.\n* ‎Showing a dead simple demo featuring multiple and nested components, by walking\n  through them making a Comment component with media queries (maybe using flexbox to\n  showcase how well it works with container queries), then once we're done, we replace\n  everything with @container, and by applying the HoC, everything just starts to work.\n  (mention that there's a render-prop version, if someone likes that better)\n* ‎So... how does it work?\n* ‎show the basic idea with the postcss plugin and runtime combination, then showing\n  practical guide about how to set up the postcss plugin configuration. (tip on how I\n  apply different plugins for different css files to make container queries an opt-in\n  feature)\n* ‎Last words, summary\n* ‎The plugin is a pet-project of mine (rfc, a lot of enhancements planned), while with\n  container queries we aim to make it available to everyone.\n* ‎didn't like my version? give a chance to some of the other great solutions out there.\n\n## Original Abstract\n\n**Title:** \"@container queries in React\"\n\n* The problem: in the advent of reusable components, we should be able to\n  conditionally apply styling based on the space available to a given component.\n* Idea: `@container` queries in CSS, applied with a JS runtime.\n* Introducing `react-container-query`, example (Gifs / Videos).\n* Talk about the current WICG efforts to create a spec for browsers.\n* Before it's standardized: ResizeObserver, Houdini.\n* Mention other libs, polyfills and size-aware react component.\n\n## Prepare for Questions\n\n* Does it work with CSS-in-JS solutions?\n* Performance?\n* SSR?\n* Does it work in non-react environments?\n* Does it work with vue.js? Other component libs?\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeecoder%2Freact-london-container-queries","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeecoder%2Freact-london-container-queries","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeecoder%2Freact-london-container-queries/lists"}