https://github.com/ericrovell/svelte-media-observer

SvelteJS media queries observer.
https://github.com/ericrovell/svelte-media-observer

media-queries observable observer svelte sveltejs sveltekit

Last synced: about 21 hours ago
JSON representation

SvelteJS media queries observer.

• Host: GitHub
• URL: https://github.com/ericrovell/svelte-media-observer
• Owner: EricRovell
• License: mit
• Created: 2021-08-24T20:35:58.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-10-26T21:36:48.000Z (about 3 years ago)
• Last Synced: 2024-12-27T00:32:01.433Z (9 days ago)
• Topics: media-queries, observable, observer, svelte, sveltejs, sveltekit
• Language: TypeScript
• Homepage:
• Size: 82 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


  





  

    

  





  

    

  

  

    

  

  

    

  

  

    

  

  

    

  





  

    

  

  

    

  

  

    

  

  

    

  



# Svelte Media Observer

Svelte Media observer is small utility media queries observer built for [Svelte](https://svelte.dev/) framework.

Try it in the [Svelte REPL](https://svelte.dev/repl/e9f6a16dfd9a4013b1a0a76347b206eb?version=3).

## Getting started

The package is available via [npm](https://www.npmjs.com/package/svelte-media-observer):

```

npm i svelte-media-observer

```

## Usage

```ts

import { mediaObserver } from "svelte-media-observer";

import type { MediaQueries } from "svelte-media-observer";

const mediaQueries: MediaQueries<"small" | "medium" | "dark"> = [

  [ "small", "(max-width: 640px)" ],

  [ "medium", "(max-width: 935px)" ],

  [ "dark", "(prefers-color-scheme: dark)" ]

];

export const media = mediaObserver(mediaQueries);

```

observer contains all named media queries as `Record`. It is build on [svelte/stores](https://svelte.dev/docs#svelte_store), so the usage is the same:

```html

  import { media } from "your-observer-path";

{#if $media.small}

  

{:else}

  

{/if}

```

## Note

It is a nice idea to create several observers depending on your need and the rate the media queries will change.

## Issues

While using Typescript and ESLint for Svelte, you might meet some [limitations](https://github.com/sveltejs/eslint-plugin-svelte3#installation-with-typescript) to type-aware rules. [Link](https://github.com/sveltejs/eslint-plugin-svelte3/issues/89) to the issue.

```html

  import { media } from "your-observer-path";

// incorrect no-unsafe-member-access error

{#if $media.small}

  

{:else}

  

{/if}

```

## Attribution

Observer alien was created by [FreakAddL](https://t.me/portfolio_e_g).