CSS Media query in JS

• Installation
• Usage
• API
• Events
• Examples
  • Basic Usage
  • Using with default breakpoints
  • Using with custom breakpoints
  • Event listening

Installation

npm install js-media-query

Usage

import Media from "js-media-query";

import { up, sm, md } from "js-media-query";

See Examples

API

| 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 |

Events

on(event, callback, media)

| 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 |

off(event, callback?, media?)

| 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 |

Examples

Basic Usage

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

Using with default breakpoints

import Media from "js-media-query";

if (Media.sm()) {
  // Your code
}

Using with custom breakpoints

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
}

Event listening

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 (min-width: 768px) AND (max-width: 992px)

Media.between(768, 992); // true | false

@media (pointer: coarse)

Media.isTouch(); // true | false

@media (min-width: 992px)

Media.min(992); // true | false

@media (max-width: 991px)

Media.down(991); // true | false

@media (min-width: 1200px)

Media.xl(); // true | false