npmpackage.info

Gathering detailed insights and metrics for svelte-media

Other packages similar to svelte-media

svelte-media-queries

1.6.2

A light and magical Svelte component for CSS media queries🐹

svelte-media-query-store

1.0.0

Provide a reactive store that detects specific media query

svelte-apexcharts

1.0.2

svelte-mq-store

3.0.0

📱 Create any media-query store in Svelte

Gathering detailed insights and metrics for svelte-media

svelte-media - 0.1.5 | npmpackage.info

svelte-media

Svelte.js util to easily observe media queries as a reactive store

0.1.5

MIT

TypeScript

7.34 kB

2.7

Installations

npm install svelte-media

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>= 11.15.0

Node Version

14.16.0

NPM Version

6.14.11 Pull Requests

Open

9

Total

20

Closed

3

Merged

8

Issues

Open

3

Total

4

Closed

1

Releases

Unable to fetch releases

Languages

TypeScript

JavaScript

TypeScript (62.18%)

JavaScript (37.82%)

Developer

cibernox

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

60 Stars

35 Commits

4 Forks

4 Watchers

10 Branches

2 Contributors

Updated on Apr 17, 2025

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

0.1.5

Package Id

svelte-media@0.1.5

Unpacked Size

7.34 kB

Size

3.49 kB

File Count

NPM Version

6.14.11

Node Version

14.16.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

svelte-media

Easy way to observe for media queries as a store for your Svelte apps

svelte-media helps you define the media queries you want to observe. By using stores to keep track of the matching state of the given media queries it notifies your app in the most efficient way when a change happens.

It works SSR environments where window.matchMedia is not available, so it can be used in Sapper apps safely.

Instalation

Just run npm i --save-dev svelte-media or yarn add svelte-media.

Usage

The package's default export is a function that takes an object with named mediaquery strings and returns a svelte store that you can export to consume any way you want.

1import watchMedia from "svelte-media";
2
3const mediaqueries = {
4  small: "(max-width: 849px)",
5  large: "(min-width: 850px)",
6  short: "(max-height: 399px)",
7  landscape: "(orientation: landscape) and (max-height: 499px)",
8  tiny: "(orientation: portrait) and (max-height: 599px)",
9  dark: "(prefers-color-scheme: dark)",
10  noanimations: "(prefers-reduced-motion: reduce)"
11};
12
13export const media = watchMedia(mediaqueries);

Given an object with named media queries, the returned object from that store will have boolean properties named after the media queries that indicate if they are a match or not, and a property named classNamesthat contains a name of the matching media queries prefixed by media- to use as convenient css classes in any element.

For the example above the object might look like this:

1{
2  small: false
3  large: true
4  short: true
5  landscape: true
6  tiny: false
7  dark: true
8  noanimations : false,
9  classNames: 'media-large media-short media-landscape media-dark'
10}

As with any other store, you can subscribe to it in templates by prefixing it with $.

1<script>
2  import { media } from '../stores';
3</script>
4
5<div class="body l-body {$media.classNames}">
6  {if $media.large}
7    <DesktopNav/>
8  {:else}
9    <MobileNav/>
10  {/if}
11</div>

You can create more than one store if, for instance, you want to keep media queries about screen size separated from, say those about pixel density, as the latter very rarely will fire an update.

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.7

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to svelte-media

Other packages similar to svelte-media

svelte-media

Installations

Developer Guide

Yes

CommonJS

>= 11.15.0

14.16.0

6.14.11

Pull Requests

9

20

3

8

Issues

3

4

1

Releases

Unable to fetch releases

Languages

Developer

cibernox

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

svelte-media

Instalation

Usage

10

10

10

3

0

0

0

0

0

0

0

0

0

2.7

/10