Husni Kamal
Crash Team Racing Pro Player (Drift). Blue fire addict. Had beaten Oxide and Emperor Velo XXVII in some time trial track. Tetris Pro Player. Rank #2 in Bandung.

Responsive Windows React.JS Menggunakan window eventlistener

Awal-awal ngoding web, saya sendiri sering bingung terkait masalah responsive. Memang sih, sudah banyak CSS framework yang sudah support responsive (hampir semua kayanya). Tapi terkadang beberapa hal tak sesuai dengan keinginan dan mau tak mau harus implement inline style pada component react.

Code ini masih sering saya pakai di project React JS ataupun Next JS. Tergantung deadline yang di berikan, biasanya saya pake code ini kalo kepepet saja.

Ngoding Section

Note dulu, disini saya pakai React Hooks, jadi buat yang pakai function component ataupun class component, tinggal sedikit disesuaikan.

Pertama, kita define dulu React, useState dan useEffect terlebih dahulu.

import React, { useState, useEffect } from 'react';

Untuk yang kepo tentang, apa itu useState atau apa itu useEffect, bisa lihat di link berikut yaw. useState disini, useEffect disini.

Selanjutnya, kita buat state width-nya.

const [width, setWidth] = useState(0);

Kita set defaultnya ke 0, karena nantinya ketika componentDidMount (untuk yang menggunakan class component atau function component), akan otomatis berubah.

Lanjut kita define method yang akan meng-handle callback dari eventlistener resize.

const updateWidth = () => setWidth(window.innerWidth);

Disini, kita mengubah state dari width, sesuai dengan ukuran lebar jendela browser.

Setelah selesai setup-nya, kita lanjut ke pembuatan eventlistener-nya. Disini kita menggunakan event ‘resize’ bawaan dari javascript-nya. Kita tempatkan di componentDidMount atau useEffect.

useEffect(() => {
  window.addEventListener("resize", updateWidth);
  updateWidth();
  return () => {
    window.removeEventListener("resize", updateWidth);
  }
}, []);

Nah itu dia, responsive resize di javascript. Kita juga bisa mengimplementasikan cara ini ketika coding menggunakan pure javascript, ataupun mungkin jquery. Tapi biasanya, jquery sendiri sudah bisa menghandle perubahan ukuran lebar jendela sih.

Semoga bermanfaat!

Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *