Security News
CISA Brings KEV Data to GitHub
CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.
@solid-primitives/media
Advanced tools
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.createPrefersDark
- Provides a signal indicating if the user has requested dark color theme.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());
createMediaQuery
accepts a serverFallback
argument — value that should be returned on the server — defaults to false
.
const isSmall = createMediaQuery("(max-width: 767px)", true);
// will return true on the server and during hydration on the client
console.log(isSmall());
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>
);
};
.toString
methodAs 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:
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
.
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
helperIf you cannot rely on the order of the breakpoints from smallest to largest, this small helper fixes it for you:
// 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];
createPrefersDark
Provides a signal indicating if the user has requested dark color theme. The setting is being watched with a Media Query.
import { createPrefersDark } from "@solid-primitives/media";
const prefersDark = createPrefersDark();
createEffect(() => {
prefersDark(); // => boolean
});
createPrefersDark
accepts a serverFallback
argument — value that should be returned on the server — defaults to false
.
const prefersDark = createPrefersDark(true);
// will return true on the server and during hydration on the client
prefersDark();
usePrefersDark
This primitive provides a singleton root variant that will reuse the same signal and media query across the whole application.
import { usePrefersDark } from "@solid-primitives/media";
const prefersDark = usePrefersDark();
createEffect(() => {
prefersDark(); // => boolean
});
Note:
usePrefersDark
will deopt tocreatePrefersDark
if used during hydration. (see issue #310)
addListener
Due to older versions of mobile Safari on iOS 13 not supporting 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 or patch the missing function like so:
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);
};
}
See CHANGELOG.md
Thanks to Aditya Agarwal for contributing createBreakpoints.
FAQs
Primitives for media query and device features
The npm package @solid-primitives/media receives a total of 31,894 weekly downloads. As such, @solid-primitives/media popularity was classified as popular.
We found that @solid-primitives/media demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.
Security News
Opengrep forks Semgrep to preserve open source SAST in response to controversial licensing changes.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.