mediaService

Simplify using mediaQueryList on project

Installing

npm i jedi-mediaservice

Usage

Function constructor MediaService getting as input array of objects with 2 properites 'key' and 'matchMedia' where key is a screenType and matchMedia is a media query, for example

``
import MediaService from "jedi-mediaservice";

const settings = [
{
key: 'mobile',
matchMedia: '(max-width: 767px)'
},
{
key: 'tablet',
matchMedia: '(min-width: 768px)'
},
{
key: 'desktop',
matchMedia: '(min-width: 1440px)'
}
]

const mediaService = new MediaService(settings);
`

both of properties must be not null and string



We can add new pairs of key and matchMedia via 'addMatchMedia' method and remove pair with method 'removeMatchMedia'

`
mediaService.addMatchMedia('mobileTablet', '(max-width: 1439px)');
mediaService.removeMatchMedia('mobileTablet');

`

For each setting item is a listener with name - 'mql' + key with whose help we can check current screen;

`
mediaService.addMatchMedia('mobileTablet', '(max-width: 1439px)');
const isMobileTabletScreen = mediaService.mqlmobileTablet.matches;
`


Then we can subscribe some procedures for every screen via method subscribe with 4 parametres: id, screenType (key from settings) and 2 functions, first when matchmedia true and second wheh matchmedia false

`

const whenScreenIsMobile = () => {
console.log('add mobile menu functional');
}

const whenScreenIsNotMobile = () => {
console.log('remove mobile menu functional');
}

mediaService.subscribe('mobileMenu', 'mobile', whenScreenIsMobile, whenScreenIsNotMobile)

`

So now our mediaService listening changing screen size and execute functions we passed in method 'subscribe'.

We can unsubscribe this procedures by id

`

mediaService.unsubscribe('mobileMenu');

``