npm install js-media-query
import Media from "js-media-query";import { up, sm, md } from "js-media-query";See Examples
| Method | Description |
|---|---|
query |
Check media query matching |
min |
Minimum breakpoint width |
max |
Maximum breakpoint width |
up |
Minimum breakpoint width |
down |
Maximum breakpoint width |
between |
Check if screen between the from and to breakpoints |
isTouch |
Check if is touck device |
isMouse |
Check if is non-touch device |
xs |
Check if screen is bigger or equal to xs class defined breapoint |
sm |
Check if screen is bigger or equal to sm class defined breapoint |
md |
Check if screen is bigger or equal to md class defined breapoint |
lg |
Check if screen is bigger or equal to lg class defined breapoint |
xl |
Check if screen is bigger or equal to xl class defined breapoint |
setBreakpoints |
Set Local class breapoints |
| Prop | Value | Required | Description |
|---|---|---|---|
event |
in , out , changed |
yes | Event type |
callback |
function |
yes | Callback function reference |
media |
function |
yes | Function reference what return result of required media query |
| Prop | Value | Required | Description |
|---|---|---|---|
event |
in , out , changed |
yes | Event type |
callback |
function |
yes | Callback function reference |
media |
function |
yes | Function reference what return result of required media query |
import { min } from "js-media-query";
window.addEventListener("resize", () => {
if (min(992)) {
console.log("Screen size is equals or bigger than 992px");
} else {
console.log("Screen size is lower than 992px");
}
});import Media from "js-media-query";
if (Media.sm()) {
// Your code
}import { Media } from "js-media-query";
const media = new Media({
xs: 0,
sm: 576,
md: 768,
lg: 992,
xl: 1200,
});
if (media.md()) {
// Execute code if screen size is bigger or equals to 768px
}import { Media } from "js-media-query";
const media = new Media();
const changedHandler = () => {
console.log("changed");
};
const mediaFn = () => media.up(768);
// Add event listener
media.on("changed", changedHandler, mediaFn);
// Remove all event listeners of event type
media.off("changed");
// Remove event listener of event type
media.off("changed", changedHandler);
// Remove event listener of event type on with specific media function
media.off("changed", changedHandler, mediaFn);Media.between(768, 992); // true | falseMedia.isTouch(); // true | falseMedia.min(992); // true | falseMedia.down(991); // true | falseMedia.xl(); // true | false