MediaReactive.js – Library JavaScript untuk media query

MediaReactive.js merupakan sebuah library JavaScript yang saya buat untuk memudahkan web developers untuk melakukan media query.

Belum tau apa itu media query?

Singkatnya, media query itu sebuah method untuk melakukan suatu hal pada width dan height tertentu di JavaScript. Sebenernya gak cuma di JS aja, media query sudah ada sejak peluncuran CSS3 yaitu dengan menggunakan @media.

Kelebihan MediaReactive.js

Nah, MediaReactive.js ini tujuannya untuk memudahkan programmer khususnya web devs untuk mendeklarasikan media query dengan lebih mudah dan less code (do more), bahkan bisa melalui atribut HTML.

Sebelum masuk ke implementasinya, berikut keunggulan dari MediaReactive.js:

Sangat lightweight, yaitu 8,1 KB untuk unpacked size nya.
Terdapat 3 jenis media, yaitu untuk phone (0 – 639px), tablet (640px – 1023px), dan desktop (1024px – ∞).
Implementasi melalui JS dengan kode singkat atau atribut HTML.

Penggunaan

1. Atribut HTML

Melalui HTML, media query dapat dilakukan dengan menggunakan atribut berikut:

<div>This thing show in phone <span data-media="phone">✅</span></div>

<div>This thing show in tablet <span data-media="tablet">✅</span></div>

<div>This thing show in desktop <span data-media="desktop">✅</span></div>

<div>This thing show in phone and desktop <span data-media="phone desktop">✅</span></div>

Secara otomatis, elemen div tersebut hanya show pada media width tertentu, sesuai dengan value dari atribut data-media yang diimplementasikan.

2. JavaScript

Melalui JavaScript, media query dapat dilakukan dengan menggunakan fungsi berikut:

MediaReactive.addResizeCallback(() => {
if (MediaReactive.isMedia('phone')) {
console.log('This runs on phone');
}
if (MediaReactive.isMedia('tablet')) {
console.log('This runs on tablet');
}
if (MediaReactive.isMedia('desktop')) {
console.log('This runs on desktop');
}
if (MediaReactive.isMedia('tablet desktop')) {
console.log('This runs on tablet and desktop');
}
});

Fungsi if-else dapat digunakan dan lebih dari 1 value (misal tablet dan desktop) dapat digunakan secara bersamaan, dengan tujuan untuk melakukan union.

Instalasi

Instalasi dapat dilakukan dengan menggunakan inline HTML dengan menempatkan elemen script seperti berikut:

<script src="https://unpkg.com/mediareactive/mediareactive.js"></script>

atau versi minified:

<script src="https://unpkg.com/mediareactive/mediareactive.min.js"></script>

dan keduanya sudah menggunakan CDN.

Kabar baiknya, library ini juga sudah dipublikasikan di npm, jadi bisa dilakukan instalasi dengan menggunakan terminal:

npm i mediareactive

Dokumentasi lebih lanjut dapat dilihat di link berikut:

Kritik, saran, dan masukan sangat saya harapkan :D