@hisho/media

A simple media library

Usage no npm install needed!

<script type="module">
  import hishoMedia from 'https://cdn.skypack.dev/@hisho/media';
</script>

README

Media

Features

Contents

Install

$ npm i @hisho/media

Usage

new Media() query - string

import { Media } from "@hisho/media";

const media = new Media(`(min-width: ${800 / 16}em)`, {
  mach: () => console.log('mach!'),
  unmatch: () => console.log('un mach!'),
});

options

new Media((min-width: ${800 / 16}em), options);

  • options? object
type MediaOptions = {
  mach?: () => void,
  unMatch?: () => void,
}

API

  • type: 'mach' | 'unmach'
  • callback: () => void

on

const media = new Media(`(min-width: ${800 / 16}em)`);

media.on('mach', () => {
  //register callback funciton when media mach
});

media.on('unmach', () => {
  //register callback funciton when media un mach
});

isMatch

return boolean

const media = new Media(`(min-width: ${800 / 16}em)`);

media.isMatch() // true or false

register

register eventListener

const media = new Media(`(min-width: ${800 / 16}em)`);

media.register();

unregister

un register eventListener

const media = new Media(`(min-width: ${800 / 16}em)`);

media.unregister();

License

MIT © hisho