https://github.com/rgglez/svelte-mediaquery

Conditionally rendering code fragments based on screen resolution.
https://github.com/rgglez/svelte-mediaquery

css mediaquery screensize svelte svelte3 svelte5

Last synced: 2 months ago
JSON representation

Conditionally rendering code fragments based on screen resolution.

• Host: GitHub
• URL: https://github.com/rgglez/svelte-mediaquery
• Owner: rgglez
• License: apache-2.0
• Created: 2025-06-26T01:54:53.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-06-27T06:19:08.000Z (about 1 year ago)
• Last Synced: 2025-06-27T07:31:08.123Z (about 1 year ago)
• Topics: css, mediaquery, screensize, svelte, svelte3, svelte5
• Language: Svelte
• Homepage:
• Size: 7.81 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# svelte-mediaquery

[![License](https://img.shields.io/badge/License-Apache2.0-blue.svg)](https://opensource.org/licenses/Apache2.0)

![GitHub all releases](https://img.shields.io/github/downloads/rgglez/svelte-mediaquery/total) 

![GitHub issues](https://img.shields.io/github/issues/rgglez/svelte-mediaquery) 

![GitHub commit activity](https://img.shields.io/github/commit-activity/y/rgglez/svelte-mediaquery)

![MadeWithSvelte](https://madewithsvelte.com/storage/repo-shields/2274-shield.svg)

![GitHub stars](https://img.shields.io/github/stars/rgglez/svelte-mediaquery?style=social)

![GitHub forks](https://img.shields.io/github/forks/rgglez/svelte-mediaquery?style=social)

Conditionally rendering code fragments based on screen resolution, using [media query](https://developer.mozilla.org/es/docs/Web/CSS/CSS_media_queries/Using_media_queries).

## Usage

### Svelte 3

```javascript

import { MediaQuery } from '$lib/components/MediaQuery.svelte';

```

```javascript

    {#if matches}

    ...

    {/if}

```

### Svelte 5 with runes

```javascript

import { useMediaQuery } from '$lib/helpers/mediaQuery.js';

const isWide = useMediaQuery('(width > 992px)');

const prefersDark = useMediaQuery('(prefers-color-scheme: dark)');

```

```javascript

{#if $isWide}

	
Wide screen

{/if}


{#if $prefersDark}

	
Dark mode user

{/if}

```


## License

Copyright 2026 Rodolfo González González

Licensed under [Apache License version 2.0](https://www.apache.org/licenses/LICENSE-2.0.html). Read the [LICENSE](LICENSE) file.