├── .editorconfig
├── .gitignore
├── LICENSE.md
├── README.md
├── package.json
└── src
    └── MediaQuery.svelte


/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | indent_size = 4
 7 | indent_style = space
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | package-lock.json
4 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Alexander Kozlovich <alexander.kozlovich@gmail.com>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## svelte-media-query ([npm](https://www.npmjs.com/package/svelte-media-query), [demo](https://svelte.dev/repl/26eb44932920421da01e2e21539494cd))
 2 | CSS media queries in svelte.
 3 | 
 4 | ## Installation
 5 | 
 6 | ```bash
 7 | npm i svelte-media-query
 8 | ```
 9 | 
10 | ## Usage
11 | 
12 | ```html
13 | <script>
14 |     import MediaQuery from "svelte-media-query";
15 | </script>
16 | 
17 | <MediaQuery query="(min-width: 1281px)" let:matches>
18 |     {#if matches}
19 |     <div class="root default">
20 |         default
21 |     </div>
22 |     {/if}
23 | </MediaQuery>
24 | 
25 | <MediaQuery query="(min-width: 481px) and (max-width: 1280px)" let:matches>
26 |     {#if matches}
27 |     <div class="root tablet">
28 |         tablet
29 |     </div>
30 |     {/if}
31 | </MediaQuery>
32 | 
33 | <MediaQuery query="(max-width: 480px)" let:matches>
34 |     {#if matches}
35 |     <div class="root mobile">
36 |         mobile
37 |     </div>
38 |     {/if}
39 | </MediaQuery>
40 | ```
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-media-query",
 3 |   "description": "Svelte CSS Media Query",
 4 |   "version": "1.1.2",
 5 |   "main": "./src/MediaQuery.svelte",
 6 |   "svelte": "./src/MediaQuery.svelte",
 7 |   "repository": "https://github.com/xelaok/svelte-media-query",
 8 |   "author": "Alexander Kozlovich <alexander.kozlovich@gmail.com>",
 9 |   "license": "MIT",
10 |   "keywords": [
11 |     "svelte",
12 |     "media query"
13 |   ]
14 | }
15 | 


--------------------------------------------------------------------------------
/src/MediaQuery.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import { onMount } from "svelte";
 3 | 
 4 |     export let query;
 5 | 
 6 |     let mql;
 7 |     let mqlListener;
 8 |     let wasMounted = false;
 9 |     let matches = false;
10 | 
11 |     onMount(() => {
12 |         wasMounted = true;
13 |         return () => {
14 |             removeActiveListener();
15 |         };
16 |     });
17 | 
18 |     $: {
19 |         if (wasMounted) {
20 |             removeActiveListener();
21 |             addNewListener(query);
22 |         }
23 |     }
24 | 
25 |     function addNewListener(query) {
26 |         mql = window.matchMedia(query);
27 |         mqlListener = (v) => (matches = v.matches);
28 |         mql.addEventListener
29 |             ? mql.addEventListener("change", mqlListener)
30 |             : mql.addListener(mqlListener);
31 |         matches = mql.matches;
32 |     }
33 | 
34 |     function removeActiveListener() {
35 |         if (mql && mqlListener) {
36 |             mql.removeEventListener
37 |                 ? mql.removeEventListener("change", mqlListener)
38 |                 : mql.removeListener(mqlListener);
39 |         }
40 |     }
41 | </script>
42 | 
43 | <slot {matches} />
44 | 


--------------------------------------------------------------------------------