{"id":16202298,"url":"https://github.com/panoply/qvp","last_synced_at":"2025-09-12T06:32:56.138Z","repository":{"id":62668611,"uuid":"560769084","full_name":"panoply/qvp","owner":"panoply","description":"💻 A tiny (1.2kb gzipped) media query utility for programmatic control of screen viewports.","archived":false,"fork":false,"pushed_at":"2023-05-23T21:50:46.000Z","size":124,"stargazers_count":10,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-09T23:41:12.677Z","etag":null,"topics":["match-media","media-queries","responsive","screen","viewport"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/panoply.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","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}},"created_at":"2022-11-02T08:17:54.000Z","updated_at":"2023-06-21T11:53:50.000Z","dependencies_parsed_at":"2024-10-27T20:20:00.136Z","dependency_job_id":"6d3b30e1-4d6d-4a2c-818d-7b893408dc98","html_url":"https://github.com/panoply/qvp","commit_stats":null,"previous_names":["panoply/viewports"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/panoply/qvp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panoply%2Fqvp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panoply%2Fqvp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panoply%2Fqvp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panoply%2Fqvp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/panoply","download_url":"https://codeload.github.com/panoply/qvp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/panoply%2Fqvp/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260083661,"owners_count":22956392,"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":["match-media","media-queries","responsive","screen","viewport"],"created_at":"2024-10-10T09:46:52.984Z","updated_at":"2025-06-19T23:34:49.758Z","avatar_url":"https://github.com/panoply.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Flems](https://img.shields.io/badge/playground-playground?labelColor=34454d\u0026color=34454d\u0026logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyNSAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIzLjY2NCA5LjE2TDE4LjIxNiAzLjczNkMxOC4xMiAzLjYxNiAxNy45NTIgMy41NDQgMTcuODA4IDMuNTQ0SDE3LjEzNkMxNi4zMiAzLjU0NCAxNS41NzYgNC4wNzIgMTUuMzEyIDQuODY0TDE0LjI4IDcuOTZDMTQuMjA4IDguMiAxNC4zNzYgOC40NjQgMTQuNjQgOC40NjRIMTYuNDY0QzE2LjcyOCA4LjQ2NCAxNi44OTYgOC43MDQgMTYuODI0IDguOTQ0TDE2LjEwNCAxMS4xMjhDMTYuMDA4IDExLjM2OCAxNS43OTIgMTEuNTM2IDE1LjUyOCAxMS41MzZIMTMuNTM2QzEzLjI3MiAxMS41MzYgMTMuMDU2IDExLjcwNCAxMi45NiAxMS45NDRMMTEuNDk2IDE2LjM4NEMxMS4wNCAxNy43MjggMTAuMDMyIDE4Ljc2IDguNzU5OTkgMTkuMjRDOS4wMjM5OSAxOS41MjggOS4yNjM5OSAxOS41MjggOS40MzE5OSAxOS41MjhIMTQuNzEyQzE0Ljg4IDE5LjUyOCAxNS4wMjQgMTkuNDggMTUuMTQ0IDE5LjM2TDIzLjY2NCAxMC44NEMyNC4xMiAxMC4zODQgMjQuMTIgOS42MTYgMjMuNjY0IDkuMTZaTTkuNjk1OTkgMTIuMDRDOS43Njc5OSAxMS44IDkuNTc1OTkgMTEuNTM2IDkuMzM1OTkgMTEuNTM2SDcuNTM1OTlDNy4yOTU5OSAxMS41MzYgNy4xMjc5OSAxMS4yOTYgNy4xOTk5OSAxMS4wOEw3Ljk0Mzk5IDguODcyQzguMDE1OTkgOC42MDggOC4yMzE5OSA4LjQ2NCA4LjQ5NTk5IDguNDY0SDEwLjQ0QzEwLjcwNCA4LjQ2NCAxMC45MiA4LjI5NiAxMS4wMTYgOC4wNTZMMTIuNDggMy42MTZDMTIuOTEyIDIuMjcyIDEzLjk0NCAxLjI0IDE1LjIxNiAwLjc2QzE1LjEzMjkgMC42NjQ0NTcgMTUuMDI5MyAwLjU4ODkyNiAxNC45MTMgMC41MzkwNTRDMTQuNzk2NiAwLjQ4OTE4MyAxNC42NzA1IDAuNDY2MjYgMTQuNTQ0IDAuNDcySDkuMjg3OTlDOS4xNDM5OSAwLjQ3MiA4Ljk3NTk5IDAuNTIgOC44Nzk5OSAwLjY0TDAuMzU5OTkgOS4xNkMwLjI0ODIzNyA5LjI2OTUgMC4xNTk0NTYgOS40MDAxOSAwLjA5ODg0NzEgOS41NDQ0M0MwLjAzODIzNzkgOS42ODg2NiAwLjAwNzAxOTA0IDkuODQzNTUgMC4wMDcwMTkwNCAxMEMwLjAwNzAxOTA0IDEwLjE1NjUgMC4wMzgyMzc5IDEwLjMxMTMgMC4wOTg4NDcxIDEwLjQ1NTZDMC4xNTk0NTYgMTAuNTk5OCAwLjI0ODIzNyAxMC43MzA1IDAuMzU5OTkgMTAuODRMNS43ODM5OSAxNi4yNjRDNS45MDM5OSAxNi4zODQgNi4wNDc5OSAxNi40NTYgNi4xOTE5OSAxNi40NTZINi44Mzk5OUM3LjY1NTk5IDE2LjQ1NiA4LjM5OTk5IDE1LjkwNCA4LjY2Mzk5IDE1LjEzNkw5LjY5NTk5IDEyLjA0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==)](https://flems.io/#0=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-phBdTUJMT0TIMBbCnCYR9-HaMIMRSy2xHjoheK6jM40WzoBVk5gx3omm6i8AVuqRoTA63wF01UHDs4FHCHvFQCAvBSgsd6MsMzPw0SNCnMyQwxD9gudGe5-cRhvPOZRHtEF-r64Ba89m4L1ZGU90i0FlznbGjAEFlUHBPTaHaLIai1x4QsFVFFe0a2j4ozFeK2oV47wvgyLkUwykXYKS7gozEYQvBaRoioMV-DUMYglK6qFEUPTK3em5fBPNvY1CnHBoknEY3eUDpMI+fTz6sukMbMkpUxyhhaNIcy1lMKk1sc0XQ-Yf66jwGwqUAABgAEmAOpqA7hqICuu+dxp-k4sYFIAga++wEV3Lm595pi3luKJ23QjbW26kQ+y-tpZR2bFrcubxBFl3C13Ye+06Az2Slva5WRfTth1RdTEd0CtAsKdFd5CVmc5WaeVbeJ8b4siKTbga+SCEzXWHRDUG1jrAoEFdZpz18SdHRkDbEnPMUZyFtRDB6t3bXosSbcINt5H8O2UHGO8js7aOruY8e7j9Z+PTmE4MwYFexnYDECFfvdo-iIIWYwFZ7QmylJeX+-qWo1O6jWy0AqenfvGfVZZ3V9nlrOc0iEVqymMin3AcU4WXOnpcNVDNqLheELJsr1eu5xuzcpfDbk68sLGBQcrdh+tlX0OAJV6gJrw72ukdK9eqjn5L0GzJMJXx6YBx0fZsN9jp7N0wvXdsqOb32Dx1VB6b79PahVxKnkPGBfFWqvM9q2zv2HPuzc9MXz9rkIZzC795n1Ni9l8Ulz8AOK0dFHaAFo0GzAdeAAEVtNL4QU5MSrvaRF1cyjHokaFGX+znwtgTAq1tgQVSF6CDwXy0DAGzHq2uysxfzs2u0vyFwk0zE9EzF3m1Xvm6xkxiGzhgOkH+FzyLzFEW29AXkqXbTIk7QOGzg7h3CYOnUqXPAJzoG0HIAwDMCQPVCci-3kB6CeEUQ9CkUQlgCv28Ttx6Sdz4IuRELkPEIyEkO4GkNslkOwKwRHh7Qnlm0AK8l83WTMMphczILEQoJcyzV3wpFnjUEbSMMSHHQnDqHsM7TnFvxcK5w4PvncN1GfjuVagvzyC6gdTf1-F0lIwsXsHIx53IA-2hEfxsTsSSKo0sTUHSKTyyPsETRo3uW9CyhMBAV6DE0IFKPKKuUsUKT8NyUsXL3l0rzyAK1mQAyeGgGWUaPsEKWlxxFoNKAXnCFSCSEGTUA4EyBKUQgyFGVmNfVsjmNCwVERiTRmRG1KFGP0WpXiNbHXXXmmFSGZA8x-DKKiD+Xk3vCVB0C0NwNxBAGgAKBAGcI3ATkdngGPHXjS25GLwaPfDpAACt5Z+DghxFtBai+jmiltK9yh6goBbJHM1Ak0sQNixdZNsVLcgQnkJjhlLE90oBuC8QsUnl3kmgxEYQEkGiyhb8NN6MrQBZ3tfZjiItmRnwnlHxziTAbt0kQ8w5oB6TGNMSMAfwRggkKBvhniYCYRnjXinYIB1QvRnj7tMTTwQBTcTx2jAd0SYgEESMV5iNKBITWxMxaQMjTF8j9ieML9aSvR3Auo9TKA81Gtm1MVyUBJ982FwkFQiicReAYBVDsD1DKZEJs57YPjShBtjCOgIJPTohwkK9wdSg4yIFjpmwkkq0k9nTOcj4LcDgUzS8FRShhMoBRNxMegpM+8EV0tzs9RgxZhnMgQTBugtS3S5kPSk9wl+dShoB+i6ZYzOy81vM6THT4BblIQbcDAZkUJq4J4eS3F3Yd8BTlTgAcdZSlR8CIMoB-hs4WApwETDUDABJ-SUcOEhd-SMANT0sigMsYNuABj30MAUzaQV5Tj7xj4wDfFHz7Dc9jRpStDqD1hqSByWsuz2seyoADgACOzQKMAs0IKDgjMTMelbzahjyYABs-yKStCr5p5w1zS2FHE8LAKxQF5q1vzhzIKKdNjq1CVrd61Xix4jCUIehUhuTrteSPYE5o9uBGEUzDUtUPR4SNgQkVy1z1T2iqhkdCBSgidsij8CLKM9iXES9I85RJKOiII1KLBeCEEXd78-YH4S8SlPzgiekuYBs-VGgPUfAVLv5d46R9MPg65e5m4cjvQoz3heySKcQyKkgV5M1vMb181ZDs0Mhi1lhS1y1i9Hd-K6KTNu0mLXSvzNjAMfBGDb0dV6jDDkr54L8MwV4QN6Bt0BA50EAtCl0YqHkcSQl7LYBHLSAPgySMhXLBpfSEx-E6qGqmrFAV4Mx1BnB8yAjQMSr4A50Qr9V4BhjONurbJBrqKBYJzVUSScVQ4HKnLmqlVvkUrxQL9ZCScV5E0Fqqghjh0IBR1l1AYex9Bl1V0DhYrMqt1Z091qlu8DSZqnKDh9qiRwgVVn0irCBRrd190NLNjvr50KqBNpshrHqRrZ0upvqFr7SSBVUHycRWDiF2DYbirZ0kazKvztoIQV5nVj83VaQbKvUfUrL3ZbIuqnLrKooiLnFFAKbtBjhbJLV9F4A64PQnM0y8q6Mpi6SmAIR2VgqC0wqIqEU-KM0IJ4LeyFrYqyT6KxzGLe0O85kv1FR-DsawMAagauojri8F5SA6QHSZAgk1AAC6bGqMA6QthLlOaglEK1r6qnKFrTbG8sl2V9bZ0IbF1hAeDO0gaMBfrCBn1TaNKHrtLuBdL+C-8DiMzvQRbmrX1E7fK6RvtONPzvilqpy8RNiU6a1liRIv5M66qc714TtssZLb8OARbzxGhTaBY8tsz1LqzukTw87ozq6dFSg66G6m6za9QtKXTay-icr8Q6QvaqkKdUKuQBJdCxlvRoBCA65-z7hCj+bSKL8dhLsXy1BqjeAKiUg0gHMQKkjwl5VYBugZLeJ9LwhIzb8Y7GTGwY6NKGjV68QAC96wAEzWBPd+7hKRZGxV6xNHYb6yCEL+YcRGhf7CA56KdjyLdMKoB17sL7gfLdq6N4HZayIl7TKX4+leye6F49zlcKLs0Fa8QGjyGrbkgHa26dK5KSckLJyAdjaL8WBYBl56hKA-7y8AHxCgGWGDAQGsRRGySycxyFraGhGTB-bpgpsAR6HuHiYjN5GorEHzKlDZNc8Y7w0N73KN7E0Ob4Bwho1yB1UYk8AElUSqq34aqHCTTi6N7tr14GiDHwHs4Rh3wXpiALGQErGW5lHlBAQACvGJrs0AnLGohlg800gprkHidVbGhklklkmFSpqDHx6drPGXTvTEnz7zcUmtSkGIJBDkDfyroN6sHNiYLL6MBuzvKe6GnTFwl5bIKMBrDYDK7OYL72numSBMaEKOGvz56YyyIemKDJdt6cRKnhCopRCLBgywtQyc4849di82mvToSFdkz-LTgIJpnj128LQBndmft4A-symdGyIDHZn7GdqjimQzi2LLiA0d8BIDH6INzs5Rj5YFUDyVUeEd9dzeBI4YgwhTFbIiR7hGgyhg0MBVg+JoNQiaID9wXIX30UoxYIhJYTBpYGBZZhm8KaAUAcAkB3pgZNZvBdYhBvtCBiXDYggFAhAPBzx3AgA)\n\n# qvp\n\nA tiny (1.2kb gzipped) media query utility for programmatic control in different screen viewports within the browser.\n\n### Install\n\nThe module is shipped for ESM consumption in the Browser.\n\n```bash\npnpm add qvp\n```\n\n[Flems Playground](https://flems.io/#0=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-phBdTUJMT0TIMBbCnCYR9-HaMIMRSy2xHjoheK6jM40WzoBVk5gx3omm6i8AVuqRoTA63wF01UHDs4FHCHvFQCAvBSgsd6MsMzPw0SNCnMyQwxD9gudGe5-cRhvPOZRHtEF-r64Ba89m4L1ZGU90i0FlznbGjAEFlUHBPTaHaLIai1x4QsFVFFe0a2j4ozFeK2oV47wvgyLkUwykXYKS7gozEYQvBaRoioMV-DUMYglK6qFEUPTK3em5fBPNvY1CnHBoknEY3eUDpMI+fTz6sukMbMkpUxyhhaNIcy1lMKk1sc0XQ-Yf66jwGwqUAABgAEmAOpqA7hqICuu+dxp-k4sYFIAga++wEV3Lm595pi3luKJ23QjbW26kQ+y-tpZR2bFrcubxBFl3C13Ye+06Az2Slva5WRfTth1RdTEd0CtAsKdFd5CVmc5WaeVbeJ8b4siKTbga+SCEzXWHRDUG1jrAoEFdZpz18SdHRkDbEnPMUZyFtRDB6t3bXosSbcINt5H8O2UHGO8js7aOruY8e7j9Z+PTmE4MwYFexnYDECFfvdo-iIIWYwFZ7QmylJeX+-qWo1O6jWy0AqenfvGfVZZ3V9nlrOc0iEVqymMin3AcU4WXOnpcNVDNqLheELJsr1eu5xuzcpfDbk68sLGBQcrdh+tlX0OAJV6gJrw72ukdK9eqjn5L0GzJMJXx6YBx0fZsN9jp7N0wvXdsqOb32Dx1VB6b79PahVxKnkPGBfFWqvM9q2zv2HPuzc9MXz9rkIZzC795n1Ni9l8Ulz8AOK0dFHaAFo0GzAdeAAEVtNL4QU5MSrvaRF1cyjHokaFGX+znwtgTAq1tgQVSF6CDwXy0DAGzHq2uysxfzs2u0vyFwk0zE9EzF3m1Xvm6xkxiGzhgOkH+FzyLzFEW29AXkqXbTIk7QOGzg7h3CYOnUqXPAJzoG0HIAwDMCQPVCci-3kB6CeEUQ9CkUQlgCv28Ttx6Sdz4IuRELkPEIyEkO4GkNslkOwKwRHh7Qnlm0AK8l83WTMMphczILEQoJcyzV3wpFnjUEbSMMSHHQnDqHsM7TnFvxcK5w4PvncN1GfjuVagvzyC6gdTf1-F0lIwsXsHIx53IA-2hEfxsTsSSKo0sTUHSKTyyPsETRo3uW9CyhMBAV6DE0IFKPKKuUsUKT8NyUsXL3l0rzyAK1mQAyeGgGWUaPsEKWlxxFoNKAXnCFSCSEGTUA4EyBKUQgyFGVmNfVsjmNCwVERiTRmRG1KFGP0WpXiNbHXXXmmFSGZA8x-DKKiD+Xk3vCVB0C0NwNxBAGgAKBAGcI3ATkdngGPHXjS25GLwaPfDpAACt5Z+DghxFtBai+jmiltK9yh6goBbJHM1Ak0sQNixdZNsVLcgQnkJjhlLE90oBuC8QsUnl3kmgxEYQEkGiyhb8NN6MrQBZ3tfZjiItmRnwnlHxziTAbt0kQ8w5oB6TGNMSMAfwRggkKBvhniYCYRnjXinYIB1QvRnj7tMTTwQBTcTx2jAd0SYgEESMV5iNKBITWxMxaQMjTF8j9ieML9aSvR3Auo9TKA81Gtm1MVyUBJ982FwkFQiicReAYBVDsD1DKZEJs57YPjShBtjCOgIJPTohwkK9wdSg4yIFjpmwkkq0k9nTOcj4LcDgUzS8FRShhMoBRNxMegpM+8EV0tzs9RgxZhnMgQTBugtS3S5kPSk9wl+dShoB+i6ZYzOy81vM6THT4BblIQbcDAZkUJq4J4eS3F3Yd8BTlTgAcdZSlR8CIMoB-hs4WApwETDUDABJ-SUcOEhd-SMANT0sigMsYNuABj30MAUzaQV5Tj7xj4wDfFHz7Dc9jRpStDqD1hqSByWsuz2seyoADgACOzQKMAs0IKDgjMTMelbzahjyYABs-yKStCr5p5w1zS2FHE8LAKxQF5q1vzhzIKKdNjq1CVrd61Xix4jCUIehUhuTrteSPYE5o9uBGEUzDUtUPR4SNgQkVy1z1T2iqhkdCBSgidsij8CLKM9iXES9I85RJKOiII1KLBeCEEXd78-YH4S8SlPzgiekuYBs-VGgPUfAVLv5d46R9MPg65e5m4cjvQoz3heySKcQyKkgV5M1vMb181ZDs0Mhi1lhS1y1i9Hd-K6KTNu0mLXSvzNjAMfBGDb0dV6jDDkr54L8MwV4QN6Bt0BA50EAtCl0YqHkcSQl7LYBHLSAPgySMhXLBpfSEx-E6qGqmrFAV4Mx1BnB8yAjQMSr4A50Qr9V4BhjONurbJBrqKBYJzVUSScVQ4HKnLmqlVvkUrxQL9ZCScV5E0Fqqghjh0IBR1l1AYex9Bl1V0DhYrMqt1Z091qlu8DSZqnKDh9qiRwgVVn0irCBRrd190NLNjvr50KqBNpshrHqRrZ0upvqFr7SSBVUHycRWDiF2DYbirZ0kazKvztoIQV5nVj83VaQbKvUfUrL3ZbIuqnLrKooiLnFFAKbtBjhbJLV9F4A64PQnM0y8q6Mpi6SmAIR2VgqC0wqIqEU-KM0IJ4LeyFrYqyT6KxzGLe0O85kv1FR-DsawMAagauojri8F5SA6QHSZAgk1AAC6bGqMA6QthLlOaglEK1r6qnKFrTbG8sl2V9bZ0IbF1hAeDO0gaMBfrCBn1TaNKHrtLuBdL+C-8DiMzvQRbmrX1E7fK6RvtONPzvilqpy8RNiU6a1liRIv5M66qc714TtssZLb8OARbzxGhTaBY8tsz1LqzukTw87ozq6dFSg66G6m6za9QtKXTay-icr8Q6QvaqkKdUKuQBJdCxlvRoBCA65-z7hCj+bSKL8dhLsXy1BqjeAKiUg0gHMQKkjwl5VYBugZLeJ9LwhIzb8Y7GTGwY6NKGjV68QAC96wAEzWBPd+7hKRZGxV6xNHYb6yCEL+YcRGhf7CA56KdjyLdMKoB17sL7gfLdq6N4HZayIl7TKX4+leye6F49zlcKLs0Fa8QGjyGrbkgHa26dK5KSckLJyAdjaL8WBYBl56hKA-7y8AHxCgGWGDAQGsRRGySycxyFraGhGTB-bpgpsAR6HuHiYjN5GorEHzKlDZNc8Y7w0N73KN7E0Ob4Bwho1yB1UYk8AElUSqq34aqHCTTi6N7tr14GiDHwHs4Rh3wXpiALGQErGW5lHlBAQACvGJrs0AnLGohlg800gprkHidVbGhklklkmFSpqDHx6drPGXTvTEnz7zcUmtSkGIJBDkDfyroN6sHNiYLL6MBuzvKe6GnTFwl5bIKMBrDYDK7OYL72numSBMaEKOGvz56YyyIemKDJdt6cRKnhCopRCLBgywtQyc4849di82mvToSFdkz-LTgIJpnj128LQBndmft4A-symdGyIDHZn7GdqjimQzi2LLiA0d8BIDH6INzs5Rj5YFUDyVUeEd9dzeBI4YgwhTFbIiR7hGgyhg0MBVg+JoNQiaID9wXIX30UoxYIhJYTBpYGBZZhm8KaAUAcAkB3pgZNZvBdYhBvtCBiXDYggFAhAPBzx3AgA)\n\n# Basic Usage\n\nThe module uses a single **default** export, so assign a default. There a 3 different different option schemas available.\n\n```js\nimport qvp from 'qvp';\n\n// OPTION 1 ~ Events\n\nqvp({\n  sm: '(max-width: 576px)',\n  md: '(min-width: 768px) and (max-width: 992px)'\n});\n\n// OPTION 2 ~ Methods\n\nqvp([\n  {\n    id: 'sm',\n    query: '(max-width: 576px)',\n    onenter: () =\u003e {\n      console.log('Screen size is below 576px');\n    },\n    onexit: () =\u003e {\n      console.log('Screen size is above 576px');\n    }\n  },\n  {\n    id: 'md',\n    query: '(min-width: 768px) and (max-width: 992px)',\n    onenter: () =\u003e {\n      console.log('Screen size above 768px but below 992px');\n    },\n    onresize: x =\u003e {\n      console.log('Screen size is: ' + x);\n    },\n    onexit: () =\u003e {\n      console.log('Left the viewport');\n    }\n  }\n]);\n\n// OPTION 3 ~ Specific\n\nqvp({\n  id: 'sm',\n  query: '(max-width: 576px)',\n  oninit: () =\u003e {\n    console.log('Screen size is below 576px');\n  },\n  onenter: () =\u003e {\n    console.log('Screen size is below 576px');\n  },\n  onexit: () =\u003e {\n    console.log('Screen size is above 576px');\n  }\n});\n```\n\n# Methods\n\nThe module provides several helpful methods for querying and retrieving context of the browsers screen.\n\n\u003c!-- prettier-ignore --\u003e\n```ts\nimport qvp from 'qvp';\n\nqvp.on(event, callback, scope?)       // Method event listening\nqvp.off(event, callback | number)     // Remove event emitter\nqvp.add(id, {})                       // Extends the screen with new methods\nqvp.get(id)                           // Returns the viewport and screen matching the id\nqvp.active()                          // List of active screens or single screen\nqvp.active(id)                        // Boolean indicating whether the screen is active\nqvp.list()                            // List of viewport screens states\nqvp.list(ids[])                       // List of viewport screen states matching the ids\nqvp.test(id | id[], separator?)       // Test utility for validating screens\nqvp.remove(id)                        // Remove a viewport matching the id from store\nqvp.destroy()                         // Tear down and remove all instances\n\n```\n\n# Events\n\nEvent listeners will fire methods as events. Media query matches will emit and invoke for all defined screens and can be sepcified using the `id:method` name. The `qvp.on()`\n\n\u003c!-- prettier-ignore --\u003e\n```ts\nimport qvp from 'qvp';\n\n// Define a set of queries and identifiers\nqvp({\n  tablet: '(min-width: 768px) and (max-width: 991px)',\n  desktop: '(min-width: 992px)'\n})\n\n// Events will also fire when using method schema\nqvp({\n  id: 'mobile',\n  query: '(max-width: 777px)',\n  oninit: () =\u003e {\n    console.log('Screen size is below 777px');\n  }\n})\n\n// ...\n\n// Listen for event methods\nqvp.on('desktop:oninit', () =\u003e {});\nqvp.on('desktop:onenter', () =\u003e {});\nqvp.on('desktop:onexit', () =\u003e {});\nqvp.on('desktop:onresize', (screenX) =\u003e { console.log(screenX) });\n\n// Optionally bind context to the events\nclass Component {\n\n  constructor () {\n    this.value = 'Hello World!'\n    this.event = qvp.on('mobile:onenter', this.method, this) // bind context to callback\n  }\n\n  method () {\n    console.log(this.value) // logs \"Hello World!\"\n  }\n\n  disconnect () {\n    qvp.off(this.event) // remove this event\n  }\n\n}\n\n// Listen for resizes\nqvp.on('tablet:onresize', (screenX: number) =\u003e {\n\n  if(screenX \u003e 800) {\n    console.log('Screen size is: ', screenX)\n  }\n\n})\n\nqvp.on('mobile:onexit', function () {\n\n  console.log(this.context) // logs \"foo\"\n  console.log(this.binding) // logs \"bar\"\n\n}, {\n  context: 'foo',\n  binding: 'bar'\n})\n```\n\n# Store\n\nThe module maintains a store within a constant named `viewports` which you can access as a named import. The store is maintained within a `Map`and each `key` value uses the screen ids, that values hold the screen instances.\n\n\u003c!-- prettier-ignore --\u003e\n```ts\nimport qvp from 'qvp';\n\nqvp.viewports.forEach(viewport =\u003e {\n\n\n  // SCREEN INSTANCE\n\n  viewport.screen            // The screen instance\n  viewport.screen.id         // The screen id value\n  viewport.screen.query      // The media query value\n  viewport.screen.active     // A boolean value indicating whether the viewport is active\n  viewport.screen.oninit     // A Set list of methods to invoke oninit\n  viewport.screen.onenter    // A Set list of methods to invoke onenter\n  viewport.screen.onexit     // A Set list of methods to invoke onexit\n  viewport.screen.onresize   // A Set list of methods to invoke when resizing\n  viewport.screen.events     // Event listeners store (also available on viewport.events)\n\n  // EVENTS EMITTERS\n\n  viewport.events            // Event listeners store (same as viewport.screen.events)\n\n  // METHOD TRIGGERS\n\n  viewport.oninit()          // Calls all methods in screen.oninit Set (null if already invoked)\n  viewport.onenter()         // Calls all methods in screen.onenter Set\n  viewport.onexit()          // Calls all methods in screen.onexit Set\n  viewport.onresize()        // Calls all methods in screen.onresize Set\n\n})\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpanoply%2Fqvp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpanoply%2Fqvp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpanoply%2Fqvp/lists"}