A ✨light✨ and magical Svelte component for CSS media queries🐹

Overview

Svelte CSS media queries 🐥

Demo - Svelte REPL

Lightweight, comfortable, like Svelte 🐣

Rate this package

how to install

npm i svelte-media-queries

What can I do?

query = {
  "mobile": "(max-width: 480px)",
  "tablet": "(min-width: 480px) and (max-width: 768px)",
  "largeTablet": "(min-width: 768px) and (max-width: 1200px)",
  "desktop": "(min-width: 1200px)",
  "other": [
    "(min-width: 1200px)",
    "(max-height: 900px)"
  ],
  "themes": {
    "dark": "(prefers-color-scheme: dark)",
    "light": "(prefers-color-scheme: light)"
  }
}
matches = {
  "mobile": false,
  "tablet": true,
  "largeTablet": false,
  "desktop": false,
  "other": [
    false,
    true
  ],
  "themes": {
    "dark": false,
    "light": true
  }
}

Yes, yes, and it's all recursive and reactive 🐹
Try it in Svelte REPL

How to use

Query? Yes, just like in CSS 🙊

query='(min-width: 768px) and (max-width: 1280px)'

Matches? This is your result

Component (bind: directive)

bind:matches
------------------
bind:matches={foo}

Slot (let: directive)

let:matches
------------------
let:matches={foo}

Examples

Slot

<script>
  import MediaQuery from 'svelte-media-queries'
</script>

<MediaQuery query='(max-width: 480px)' let:matches>
  {#if matches}
    mobile!!
  {/if}
</MediaQuery>

Bind

<script>
  import MediaQuery from 'svelte-media-queries'

  let matches
</script>

<MediaQuery query='(max-width: 480px)' bind:matches/>

{#if matches}
  mobile!!
{/if}

{#if matches}
  Oh my God, it's really mobile
{/if}

That's not all!

You can use an array from query

query={['(max-width: 1200px)', '(min-width: 800px)']}

What about matches?
Matches will take everything from query in order

matches=[boolean, boolean]

You can test this in Svelte REPL 🐥

Example

<script>
  import MediaQuery from 'svelte-media-queries'
</script>

<MediaQuery query={['(max-width: 768px)', '(min-width: 768px) and (max-width: 1280px)', '(min-width: 1280px)']} let:matches>
  {@const [mobile, tablet, desktop] = matches}
  <h5>
    mobile: '(max-width: 768px)' = {mobile}
    tablet: '(max-width: 1280px)' = {tablet}
    desktop: '(min-width: 1280px)' = {desktop}
  </h5>
</MediaQuery>

{@const} - Svelte Docs 🐹
You can also use it through the array index tablet = matches[1]
With bind:, everything is the same 🐥

You might also like...

Svelte component to display time distances in a human readable format.

Time Distance Display time distances in a human readable format. Based on date-fns Updates every 60 seconds View demo Usage Install package: pnpm i -D

Nov 2, 2022

A health-focused app for users to be able to track workouts and nutritional data with a social media component to inspire friendly competition among the users.

A health-focused app for users to be able to track workouts and nutritional data with a social media component to inspire friendly competition among the users.

Aug 26, 2022

🗂 Universal Media Library as a web component.

🗂 Universal Media Library as a web component.

Kondonizer Kondonizer is a custom element (a native HTML tag) that can be integrated in any frontend code. It displays a media library based on a Medi

Jul 19, 2022

jQuery UI widget for structured queries like "Contacts where Firstname starts with A and Birthday before 1/1/2000 and State in (CA, NY, FL)"...

jQuery UI widget for structured queries like

Structured-Filter · Structured-Filter is a generic Web UI for building structured search or filter queries. With it you can build structured search co

Jan 6, 2023

Perform queries on the current graph and batch process on the results.

Perform queries on the current graph and batch process on the results.

logseq-plugin-batch-op 对当前库进行查询并对查询结果进行批量操作。 Perform queries on the current graph and batch process on the results. 使用展示 (Usage) 批量删除 (Batch Delete) 批

Dec 1, 2022

🍉 Water is a micro-ORM + QueryBuilder designed to facilitate queries and operations on PostgreSQL databases designed to work in Melon

🍉 Water Water is a micro-ORM + QueryBuilder designed to facilitate queries and operations on PostgreSQL databases designed to work in MelonRuntime In

Aug 6, 2022

A example vault to collect and showcase various dataview queries. Created on behalf of AB1908

A example vault to collect and showcase various dataview queries. Created on behalf of AB1908

Obsidian Example Vault for Dataview Queries Good day! This example vault showcases different usages of the Dataview plugin for Obsidian.md. You'll fin

Jan 5, 2023

Learn GraphQL by building a blogging engine. Create resolvers, write schemas, write queries, design the database, test and also deploy.

GraphQL Blog graphqlblog.com Learn GraphQL by building a blogging engine. Create resolvers, write schemas, write queries, design the database, test an

Aug 17, 2022

This Plugin is For Logseq. If you're using wide monitors, you can place journals, linked references, and journal queries side by side.

This Plugin is For Logseq. If you're using wide monitors, you can place journals, linked references, and journal queries side by side.

Logseq Column-Layout Plugin Journals, linked references, and journal queries can be placed side by side if the minimum screen width is "1850px" or mor

Dec 14, 2022
Comments
  • Missing

    Missing "." export in "svelte-media-queries" package

    Failed to resolve entry for package "svelte-media-queries". The package may have incorrect main/module/exports specified in its package.json: Missing "." export in "svelte-media-queries" package

    opened by ksawery29 4
  • Boolean media queries not working

    Boolean media queries not working

    Hey Nikita!

    Nice work on this library. I noticed an issue with dynamic media queries. Compound queries return false, even when the individual queries return true.

    Take a look at this screenshot from the REPL and I think you'll understand the issue:

    Screenshot from 2022-11-30 15-57-07

    I expected [true, true, true] in that last line.

    Thanks again!

    opened by mahmoud 1
  • Add default

    Add default "." export to package.json

    Upgrading to Vite 4.0 caused Vite to complain about a missing default export "." in package.json. Added one and now working with Vite 4.0

    Please merge if it makes sense to you.

    opened by bosticka 0
Releases(1.5.1)
An npm package with Tailwind CSS utility classes for creating responsive grid columns without media queries using auto fit.

Grid Auto Fit for Tailwind CSS A plugin that helps you create a responsive grid layout in Tailwind CSS without using media queries. It uses the auto-f

Thirus 80 Dec 28, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Awesome Media Queries in JavaScript

enquire.js - Awesome Media Queries in JavaScript enquire.js is a lightweight, pure javascript library (with no dependencies) for programmatically resp

Nick Williams 3.6k Jan 6, 2023
A magical vite plugin that helps you to generate and manage documentation website.

vite-plugin-book A magical vite plugin that helps you to generate and manage documentation website. ⚠️ This project is still WIP. It's a MVP now. A bu

Mirone 89 Dec 20, 2022
A Svelte parser that compiles to Mitosis JSON, allowing you to write Svelte components once and compile to every framework.

Sveltosis Still in development A Svelte parser that compiles to Mitosis JSON, allowing you to write Svelte components once and compile to every framew

sveltosis 70 Nov 24, 2022
A social media platform aimed to capture the essence of all popular, existing social media platforms

Social Fuel Reimagining Social Media, step by step ?? About A social media platform aimed to capture the essence of all popular, existing social media

HariHaran 6 Feb 12, 2022
Svelte component to render markdown.

svelte-exmarkdown Svelte component to render markdown. Motivation svelte-markdown is a good component package. However, it is not extensible. You cann

Sotaro Tommykawa 43 Jan 6, 2023
👇 Bread n butter utility for component-tied mouse/touch gestures in Svelte.

svelte-gesture svelte-gesture is a library that lets you bind richer mouse and touch events to any component or view. With the data you receive, it be

Robert Soriano 29 Dec 21, 2022