# @solid-primitives/media

> Primitives for media query and device features

Latest version **2.3.6** (published 2026-07-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @solid-primitives/media
pnpm add @solid-primitives/media
yarn add @solid-primitives/media
bun add @solid-primitives/media
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.3.6 |
| Published | 2026-07-04 |
| First published | 2021-07-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 4 |
| Unpacked size | 18.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1558 |
| Author | David Di Biase |
| Maintainers | davedbase, lexlohr, thetarnav. |
| Keywords | media, mediaquery, query, breakpoints, responsive, solid, primitives |

## Links

- npm: https://www.npmjs.com/package/@solid-primitives/media
- Repository: https://github.com/solidjs-community/solid-primitives
- Homepage: https://primitives.solidjs.community/package/media
- Issues: https://github.com/solidjs-community/solid-primitives/issues
- npm.io page: https://npm.io/package/@solid-primitives/media

## Dependencies (4)

- [@solid-primitives/utils](https://npm.io/package/@solid-primitives/utils.md) ^6.4.1
- [@solid-primitives/rootless](https://npm.io/package/@solid-primitives/rootless.md) ^1.5.4
- [@solid-primitives/static-store](https://npm.io/package/@solid-primitives/static-store.md) ^0.1.4
- [@solid-primitives/event-listener](https://npm.io/package/@solid-primitives/event-listener.md) ^2.4.6

## Alternatives

- [gamedig](https://npm.io/package/gamedig.md) — 29.3K weekly downloads
- [join-monster](https://npm.io/package/join-monster.md) — 12.8K weekly downloads
- [masked](https://npm.io/package/masked.md) — 5.5K weekly downloads
- [@comunica/actor-query-process-explain-logical](https://npm.io/package/@comunica/actor-query-process-explain-logical.md) — 4.7K weekly downloads
- [@veracity/vui](https://npm.io/package/@veracity/vui.md) — 4.6K weekly downloads

## Recent versions

- 2.3.6 (latest) — 2026-07-04
- 4.0.0-next.2 (next) — 2026-08-12
- 2.1.3-beta.0 (beta) — 2023-03-03
- 4.0.0-next.1 — 2026-07-18
- 4.0.0-next.0 — 2026-06-26
- 2.3.5 — 2026-02-24
- 2.3.4 — 2026-02-21
- 2.3.3 — 2025-06-30
- 2.3.2 — 2025-06-29
- 2.3.1 — 2025-04-27
- 2.3.0 — 2025-01-22
- 2.2.10 — 2025-01-10
- 2.2.9 — 2024-04-09
- 2.2.8 — 2024-03-05
- 2.2.7 — 2024-02-28
- … 31 more at https://npm.io/package/@solid-primitives/media/versions

## README

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=Media" alt="Solid Primitives Media">
</p>

# @solid-primitives/media

[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/media?style=for-the-badge)](https://bundlephobia.com/package/@solid-primitives/media)
[![size](https://img.shields.io/npm/v/@solid-primitives/media?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/media)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-3.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)

Collection of reactive primitives to deal with media queries.

- [`makeMediaQueryListener`](#makemediaquerylistener) - Listen for changes to provided Media Query.
- [`createMediaQuery`](#createmediaquery) - Creates a very simple and straightforward media query monitor.
- [`createBreakpoints`](#createbreakpoints) - Creates a multi-breakpoint monitor to make responsive components easily.
- [`createPrefersDark`](#createprefersdark) - Provides a signal indicating if the user has requested dark color theme.

## Installation

```
npm install @solid-primitives/media
# or
yarn add @solid-primitives/media
```

## `makeMediaQueryListener`

Attaches a MediaQuery listener to window, listeneing to changes to provided query

```ts
import { makeMediaQueryListener } from "@solid-primitives/media";

const clear = makeMediaQueryListener("(max-width: 767px)", e => {
  console.log(e.matches);
});
// remove listeners (will happen also on cleanup)
clear();
```

## `createMediaQuery`

Creates a very simple and straightforward media query monitor.

```ts
import { createMediaQuery } from "@solid-primitives/media";

const isSmall = createMediaQuery("(max-width: 767px)");
console.log(isSmall());
```

### Server fallback

`createMediaQuery` accepts a `serverFallback` argument — value that should be returned on the server — defaults to `false`.

```ts
const isSmall = createMediaQuery("(max-width: 767px)", true);

// will return true on the server and during hydration on the client
console.log(isSmall());
```

[Working Demo](https://codesandbox.io/s/solid-media-query-5bf16?file=/src/index.tsx)

## `createBreakpoints`

Creates a multi-breakpoint monitor to make responsive components easily.

```tsx
import { createBreakpoints } from "@solid-primitives/media";

const breakpoints = {
  sm: "640px",
  lg: "1024px",
  xl: "1280px",
};

const Example: Component = () => {
  const matches = createBreakpoints(breakpoints);

  createEffect(() => {
    console.log(matches.sm); // true when screen width >= 640px
    console.log(matches.lg); // true when screen width >= 1024px
    console.log(matches.xl); // true when screen width >= 1280px
  });

  return (
    <div
      classList={{
        "text-tiny flex flex-column": true, // tiny text with flex column layout
        "text-small": matches.sm, // small text with flex column layout
        "text-base flex-row": matches.lg, // base text with flex row layout
        "text-huge": matches.xl, // huge text with flex row layout
      }}
    >
      <Switch fallback={<div>Smallest</div>}>
        <Match when={matches.xl}>Extra Large</Match>
        <Match when={matches.lg}>Large</Match>
        <Match when={matches.sm}>Small</Match>
        {/* 
          Instead of fallback, you can also use `!matches.sm`
          <Match when={!matches.sm}>Smallest</Match>
         */}
      </Switch>
    </div>
  );
};
```

### `.toString` method

As a convenience feature, the return value of `createBreakpoints` also contains a non-enumerable `.key` property that will return the last matching breakpoint id to allow using it as an object key:

```ts
import { createBreakpoints } from "@solid-primitives/media";

const breakpoints = {
  sm: "640px",
  lg: "1024px",
  xl: "1280px",
};

const matches = createBreakpoints(breakpoints);

const moduleSize = () =>
  ({
    sm: 2,
    lg: 4,
    xl: 6,
  })[matches.key];
```

This can be very helpful for things like the `mapHeight` option in [`createMasonry`](https://solid-primitives.netlify.app/package/masonry#createMasonry).

> **Warning** for this feature to work, the breakpoints needs to be ordered from small to large. If you cannot ensure this, use the `sortBreakpoints` helper.

### `sortBreakpoints` helper

If you cannot rely on the order of the breakpoints from smallest to largest, this small helper fixes it for you:

```ts
// unfortunately in the wrong order:
const breakpoints = {
  xl: "1280px",
  lg: "1024px",
  sm: "640px",
};

const matches = createBreakpoints(sortBreakpoints(breakpoints));

const moduleSize = () =>
  ({
    sm: 2,
    lg: 4,
    xl: 6,
  })[matches.key];
```

### Demo

[Working Demo](https://codesandbox.io/s/solid-responsive-breakpoints-h4emy8?file=/src/index.tsx)

## `createPrefersDark`

Provides a signal indicating if the user has requested dark color theme. The setting is being watched with a [Media Query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).

### How to use it

```ts
import { createPrefersDark } from "@solid-primitives/media";

const prefersDark = createPrefersDark();
createEffect(() => {
  prefersDark(); // => boolean
});
```

### Server fallback

`createPrefersDark` accepts a `serverFallback` argument — value that should be returned on the server — defaults to `false`.

```ts
const prefersDark = createPrefersDark(true);
// will return true on the server and during hydration on the client
prefersDark();
```

### `usePrefersDark`

This primitive provides a [singleton root](https://github.com/solidjs-community/solid-primitives/tree/main/packages/rootless#createSingletonRoot) variant that will reuse the same signal and media query across the whole application.

```ts
import { usePrefersDark } from "@solid-primitives/media";

const prefersDark = usePrefersDark();
createEffect(() => {
  prefersDark(); // => boolean
});
```

> Note: `usePrefersDark` will deopt to `createPrefersDark` if used during hydration. (see issue [#310](https://github.com/solidjs-community/solid-primitives/issues/310))

## Notes

### iOS 13 Support & Deprecated `addListener`

Due to older versions of [mobile Safari on iOS 13 not supporting](https://github.com/mdn/sprints/issues/858) `addEventListener` on the MediaQueryList API, this primitive will need to be polyfilled. If your application needs to support much older versions of the browser you should [use a polyfill utility](https://www.npmjs.com/package/matchmedia-polyfill) or patch the missing function like so:

```ts
if ((!"addEventListener") in MediaQueryList) {
  MediaQueryList.prototype.addEventListener = function (type, callback) {
    if (type === "change") this.addListener(callback);
  };
  MediaQueryList.prototype.removeEventListener = function (type, callback) {
    if (type === "change") this.removeListener(callback);
  };
}
```

## Changelog

See [CHANGELOG.md](./CHANGELOG.md)

## Contributors

Thanks to Aditya Agarwal for contributing createBreakpoints.

---
_Source: https://npm.io/package/@solid-primitives/media · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._