@skriptx2/jsmediaquery

1.2.1 • Public • Published

Description:
A lightweight and flexible library for managing CSS media queries programmatically. This utility simplifies responsive design by providing an easy-to-use API for detecting and reacting to viewport changes. Perfect for developers seeking to streamline responsive UI development across projects.

Features:

  • Simplified media query detection with readable syntax.
  • Event listeners for media query changes.
  • Customizable breakpoints and support for complex query strings.
  • Lightweight with no external dependencies.
  • Compatible with modern browsers.

Use Cases:

  • Creating dynamic layouts that adapt to different screen sizes.
  • Managing responsive design logic in JavaScript/TypeScript applications.
  • Building reusable, breakpoint-aware components.

Get Started:
Include this library in your project to take control of your responsive design needs without writing repetitive CSS media query code.

Installation

npm install @skriptx2/jsmediaquery

Code Usage

import { MediaQuery } from "@skriptx2/jsmediaquery";

MediaQuery.sm(); // returns true if between 577px and 767px

MediaQuery.get(); // returns breakpoints

Examples

Alt text

Alt text

Alt text

To change the breakpoint

MediaQuery.set({sm:700}) // sets sm max breakpoint to 700px

Alt text

Full Usage

MediaQuery.xs(); // Extra small device
MediaQuery.gtxs(); //  Greater than extra small device
MediaQuery.ltsm(); // Less than small device
MediaQuery.sm(); // Small device
MediaQuery.gtsm(); // Greater than small device
MediaQuery.ltmd(); // Less than medium device
MediaQuery.md(); // Medium device
MediaQuery.gtmd(); // Greater than medium device
MediaQuery.ltlg(); // Less than large device
MediaQuery.lg(); // Large device
MediaQuery.gtlg(); // Greater than large device
MediaQuery.ltxl(); //  Less than extra large device
MediaQuery.xl(); //  Extra large device
MediaQuery.gtxl(); //  Greater than extra large device
MediaQuery.ltxxl(); //  Less than double extra large device
MediaQuery.xxl(); //  Double extra large device

MediaQuery.all(); // Returns all values
MediaQuery.set(); // Sets breakpoints
MediaQuery.get(); // Gets breakpoints
MediaQuery.innerWidth; // Gets window innerwidth

Contributions are welcome! 🎉

Package Sidebar

Install

npm i @skriptx2/jsmediaquery

Weekly Downloads

0

Version

1.2.1

License

ISC

Unpacked Size

92.1 kB

Total Files

11

Last publish

Collaborators

  • skriptx2