@solid-primitives/media

Collection of reactive primitives to deal with media queries.

makeMediaQueryListener - Listen for changes to provided Media Query.
createMediaQuery - Creates a very simple and straightforward media query monitor.
createBreakpoints - Creates a multi-breakpoint monitor to make responsive components easily.
usePrefersDark - 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

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.

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

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

Working Demo

`createBreakpoints`

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

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>
  );
};

Working Demo

`usePrefersDark`

Provides a signal indicating if the user has requested dark color theme. The setting is being watched with a Media Query.

How to use it

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

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

Server fallback

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

const prefersDark = usePrefersDark(true);
// will return true on the server
prefersDark();

Changelog

Expand Changelog

0.0.100

Initial release.

1.0.0

Shipped first stable version.

1.1.7

Published with CJS and SSR support.

1.1.10

Added server entry and updated to latest Solid.

1.1.11

Removed onMount and returned the current media query immediately as opposed to onEffect.

1.2.0

Added createBreakpoints primitive as an alpha release.

1.3.0

Added makeMediaQueryListener, implementation improvements

2.0.0

Add usePrefersDark.

Remove the default export. (createMediaQuery will only be available as named export)

Contributors

Thanks to Aditya Agarwal for contributing createBreakpoints.