https://github.com/iamkhan21/media-query-js

Use same mechanics like CSS media queries in JavaScript instead ResizeObserver
https://github.com/iamkhan21/media-query-js

css-object-model javascript media-query mediaquery mediaquerylist

Last synced: about 1 month ago
JSON representation

Use same mechanics like CSS media queries in JavaScript instead ResizeObserver

• Host: GitHub
• URL: https://github.com/iamkhan21/media-query-js
• Owner: iamkhan21
• License: mit
• Created: 2021-08-19T13:53:13.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2022-11-20T21:03:13.000Z (about 2 years ago)
• Last Synced: 2024-04-26T05:44:12.251Z (8 months ago)
• Topics: css-object-model, javascript, media-query, mediaquery, mediaquerylist
• Language: TypeScript
• Homepage:
• Size: 737 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# @iamkhan21/media-query-js

Use like css media queries in code instead ResizeObserver

[![npm version](https://badgen.net/npm/v/@iamkhan21/media-query-js)](https://npm.im/@iamkhan21/media-query-js) [![npm downloads](https://badgen.net/npm/dm/@iamkhan21/media-query-js)](https://npm.im/@iamkhan21/media-query-js)

## Install

```bash

npm i @iamkhan21/media-query-js

```

## Usage

```ts

import { MediaQuery } from "@iamkhan21/media-query-js";

const query = "(max-width: 768px)";

function onChange(matches: boolean) {

  console.log(`Screen width is ${matches ? "less" : "more"} than 768px`);

}

// You will recieve match result after class initialization

const mq = new MediaQuery(query, onChange);

// For screen width more than 768px

// console.log("Screen width is more than 768px")

// Also you can subscribe and track width changes

mq.on();

// To unsubscribe call next:

mq.off();

```