Responsive-slider NPM

CSS Media query in JS

npm

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

@everything-registry/sub-chunk-2658 @zalastax/nolb-resp @infinitebrahmanuniverse/nolb-resp

1.0.0

4 years ago