Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/panoply/qvp
💻 A tiny (1.2kb gzipped) media query utility for programmatic control of screen viewports.
https://github.com/panoply/qvp
match-media media-queries responsive screen viewport
Last synced: 2 months ago
JSON representation
💻 A tiny (1.2kb gzipped) media query utility for programmatic control of screen viewports.
- Host: GitHub
- URL: https://github.com/panoply/qvp
- Owner: panoply
- Created: 2022-11-02T08:17:54.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2023-05-23T21:50:46.000Z (over 1 year ago)
- Last Synced: 2024-10-11T09:46:44.613Z (3 months ago)
- Topics: match-media, media-queries, responsive, screen, viewport
- Language: TypeScript
- Homepage:
- Size: 121 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
Awesome Lists containing this project
README
[](https://flems.io/#0=N4IgtglgJlA2CmIBcA2A7AOgAwE4A0IAzvAgMYAu8UyIG5hIBAZhAg0gNqgB2AhmIiS0AFuTCxGIUgHtulOTQA8AWmUACAErxCEAF7w1AZVIAnePG6TiZchFnsQWJAEY0IAL54e-QbXqSZOQtyGggwAAdpE3I1AEcAN3C1JhNpMDUAcgwAegTwjIAdbiK8gAoOIrU1YEqqtWgkTMIwDLxaqtiAV3gTAE9GjNKwXgAPZQB3aHJhRoBWNBRwkYBKVva1WQhuCHJG0uW1AF4APmr1qsDCaQQMWGkAc1KMgElueOkAayoN7lhetWcalsAjUnUi3DUwR6W3uGWWAG51p51rIoSY9gcTtU6mpzmpLtd4LcHk9jGYLGodPp6oQ1AAjEjScZqeaLEZwxEQurIrlVVEjHYYo6nGq8uoEm53R4ZMnmCFUgwQWm8OnSeIGVlLDlI2qeXFc0U4hqZMBQNZiro9fqZIZbCZTGZqBYADiWB143CgaiGo3tUGmjRwOAATG7zTjUUF0d7MSL9TiLvZCcTpbKKQq1Cq1QYXUt6Z0Ygy7syg6H2QikW0xbIzArGiNhWcxYnuFdJSSZaY5ZS9IrCAM1ABqNQrTk4nkR7jwAW7GONw0JiVEqVPAAy8CYMWmBniEHg40i0W1YvcuqKAF0K8VuNlsmoALIAUQAKgAJADyABE1I+AGqPgA5Z9DCKW8SkSDBZCeZokE2bZyFaOcsSXFMnkfdU5B-SByEoKBGhguCdjhZZwPCSDuGgsBYKnGdEP2RsUJXDJ0OCLCdlw-CqP5IjlhI7g8nIyjqLROjY3xJN22lFjMMfbCOMpLipyjYiilAu97wAVVXZ9ngABVXR8f3-ICQP4iCoIyU1hOUvAkNORiO2kmJZPYqhGisyNKBMAEVLMsiLI8miiNs+jkIk5dHIw5y5LctRAunHYfN41Sbzvd8ACFnwAQWeACjMA59NEfAAxR8NEAgBhQzivfDQivvd9fyy1cikuGJ4Cio44nMijLLwzyelEhjwtQ5jOpcnDYviqM1GDXy1KKwxngALUMv8CsMfUBIsgjuFrXs6JWedalqBypPGmK8IU6j9v0RCVhOrkICYUoG1OABmLAsDUAAyH6RzURQ1AAFlmLADgXFs2wi6UClUooMiHTJyoa-9v3WkzEeHQp4e4LHMnUaavIBOHuHUXbbvgUnSbhdZtqYF6+usrzEI64I+JxenGYp7QDo5tRTy5R73D4gI0nCVgehofwCGseAKDsVsaGBtAkGBlAPC8EA+AEGgBJlqRZHkEIhGyAAqM3KjNtRP3gVVOm4UgqYhS2XbUZ9hFSHC2CBYQDCgMILB0WR8V4WBSE6WBeFsEOzCYHoLCdwgreyIomAdhWQ6gO3pAzgxSnTx2AH5GmKjOY+4Wzxl4HYS7UbhOjABkTAhlKqgQLdA9z2cG6bnouurnZOVqMxyE6EwIULzOIXo0V1jatQo+Jw47KbBMgS7gsuob2BYDHBMp4wXhwnCP5SmmJVbN4Ex7kb4JCCvcdh7FZ7vWBeBu4OUgPSd2Asu2YYFdiomB8OfTe5ArzrHft3LqZhLSEHIP-MI0dFbANAUvHokCuTuE5ILUCFsrYPngNMaQUBk4u0IVlGAtIBAkLIUCaQvsdx7gPFEeg9RWzkB-gYaY0dMxmAYfSZ2ahrbkBMBAe49wE5enGH7CEgDSB+ygBgFOady6KzisQ4QpDaSlGkOEegjRfwsMPOQd8BjFa0gAD5qGMfuUxZdHYV0ILZRIRiTFsLTNwVu14qiv3Pr0cIH8mAbAMYQciaIjiHBXhkKeFc4RrzqP4gAhE8PISA2ZyERlsUJ9AIlRl4rk8JA0TAcAyOkzJCFzxdQArwAC+8qg9TREfGAeiwn5K8o-AWbd6ghICUE6QIT9F5O4jEaJMS4mKwSZDXp3pUnlLcZU7JEJhnFKChAg4qyIkzjKRUqKGRqkr1qfU9YTSZwtKgG0kZ6yul4Ken08ggTglFPIpTKJEz1GyGmesFJaTFn7I4S8msvN9CFK2cChUuz-nBAOTUupDS1A9Uphcq5azKa3J6f4x5AyhntMImM6JmRJlfJ8UaPp8y9kwsBeC7Y8EwV4tpTsKF4QMn7MOWoY5CKepbB2CimlPKIH7zuXc82rsRFsWclFK2hDdLiPiNHAwxKISdGIMkKIkI5IwkhFFWksiICKNBMQEwyoBGEE6HSQgpgIAMmUao7gSqNU7EUIVac8h6FOVqQIQgpxSg63gI0Z8tkMDBuvvcfsP4oq6Wvj4LyhBnXHA4JeJsp17AxESF1ASUjyC+p8BgQgp8dhPCQHCDgWBLzPz8X09N4zkhh2IAcUe49uD71+X6wFEFKkPwbcQptz9ahMHVaUDu9QupYHhCOoGHadUcD9eeW4Fh7jTHHRAQcg5SV1CnffGdPhzwcAgHO4+p9ei+sjrAK+N8H4Iv8X6jAFgyEAHUdjCCLfi4i3V-IMxzQIWyEAumVtKKkttOTN1yC7fSMwvAPhnmvClEVBC3YVQg5QaVCGkPMPsWwykXDKDkJEane1nyIRdgVd6VZ7iMPRHMc4nxKbOFxG6H0LqWzLSMasTYjIYdYAZH3gvSY-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)
# qvp
A tiny (1.2kb gzipped) media query utility for programmatic control in different screen viewports within the browser.
### Install
The module is shipped for ESM consumption in the Browser.
```bash
pnpm add qvp
```
[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)
# Basic Usage
The module uses a single **default** export, so assign a default. There a 3 different different option schemas available.
```js
import qvp from 'qvp';
// OPTION 1 ~ Events
qvp({
sm: '(max-width: 576px)',
md: '(min-width: 768px) and (max-width: 992px)'
});
// OPTION 2 ~ Methods
qvp([
{
id: 'sm',
query: '(max-width: 576px)',
onenter: () => {
console.log('Screen size is below 576px');
},
onexit: () => {
console.log('Screen size is above 576px');
}
},
{
id: 'md',
query: '(min-width: 768px) and (max-width: 992px)',
onenter: () => {
console.log('Screen size above 768px but below 992px');
},
onresize: x => {
console.log('Screen size is: ' + x);
},
onexit: () => {
console.log('Left the viewport');
}
}
]);
// OPTION 3 ~ Specific
qvp({
id: 'sm',
query: '(max-width: 576px)',
oninit: () => {
console.log('Screen size is below 576px');
},
onenter: () => {
console.log('Screen size is below 576px');
},
onexit: () => {
console.log('Screen size is above 576px');
}
});
```
# Methods
The module provides several helpful methods for querying and retrieving context of the browsers screen.
```ts
import qvp from 'qvp';
qvp.on(event, callback, scope?) // Method event listening
qvp.off(event, callback | number) // Remove event emitter
qvp.add(id, {}) // Extends the screen with new methods
qvp.get(id) // Returns the viewport and screen matching the id
qvp.active() // List of active screens or single screen
qvp.active(id) // Boolean indicating whether the screen is active
qvp.list() // List of viewport screens states
qvp.list(ids[]) // List of viewport screen states matching the ids
qvp.test(id | id[], separator?) // Test utility for validating screens
qvp.remove(id) // Remove a viewport matching the id from store
qvp.destroy() // Tear down and remove all instances
```
# Events
Event 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()`
```ts
import qvp from 'qvp';
// Define a set of queries and identifiers
qvp({
tablet: '(min-width: 768px) and (max-width: 991px)',
desktop: '(min-width: 992px)'
})
// Events will also fire when using method schema
qvp({
id: 'mobile',
query: '(max-width: 777px)',
oninit: () => {
console.log('Screen size is below 777px');
}
})
// ...
// Listen for event methods
qvp.on('desktop:oninit', () => {});
qvp.on('desktop:onenter', () => {});
qvp.on('desktop:onexit', () => {});
qvp.on('desktop:onresize', (screenX) => { console.log(screenX) });
// Optionally bind context to the events
class Component {
constructor () {
this.value = 'Hello World!'
this.event = qvp.on('mobile:onenter', this.method, this) // bind context to callback
}
method () {
console.log(this.value) // logs "Hello World!"
}
disconnect () {
qvp.off(this.event) // remove this event
}
}
// Listen for resizes
qvp.on('tablet:onresize', (screenX: number) => {
if(screenX > 800) {
console.log('Screen size is: ', screenX)
}
})
qvp.on('mobile:onexit', function () {
console.log(this.context) // logs "foo"
console.log(this.binding) // logs "bar"
}, {
context: 'foo',
binding: 'bar'
})
```
# Store
The 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.
```ts
import qvp from 'qvp';
qvp.viewports.forEach(viewport => {
// SCREEN INSTANCE
viewport.screen // The screen instance
viewport.screen.id // The screen id value
viewport.screen.query // The media query value
viewport.screen.active // A boolean value indicating whether the viewport is active
viewport.screen.oninit // A Set list of methods to invoke oninit
viewport.screen.onenter // A Set list of methods to invoke onenter
viewport.screen.onexit // A Set list of methods to invoke onexit
viewport.screen.onresize // A Set list of methods to invoke when resizing
viewport.screen.events // Event listeners store (also available on viewport.events)
// EVENTS EMITTERS
viewport.events // Event listeners store (same as viewport.screen.events)
// METHOD TRIGGERS
viewport.oninit() // Calls all methods in screen.oninit Set (null if already invoked)
viewport.onenter() // Calls all methods in screen.onenter Set
viewport.onexit() // Calls all methods in screen.onexit Set
viewport.onresize() // Calls all methods in screen.onresize Set
})
```