React Hooks useScreenSize

Table of Contents

Perkenalan
Membuat Folder
Impor
Membuat Tipe Data (Typescript)
Membuat Hooks

Perkenalan

Kali ini saya akan membagikan bagaimana saya membuat fungsi mendapatkan ukuran layar menggunakan React Hooks useScreenSize.

Membuat Folder

Hal pertama yang harus kita lakukan adalah membuat folder hooks dalam folder src. Apabila Anda tidak menggunakan folder src, Anda bisa langsung membuat folder hooks.

/
└-- src/
    |-- ...
    |-- hooks/
    |   └-- useScreenSize.js (atau useScreenSize.ts)
    └-- ...

Impor

Selanjutnya, kita akan mengimpor apa yang kita butuhkan.

import { useState, useEffect } from 'react'

NOTE

Apabila Anda menggunakan Next.js App Router, Anda bisa mengimpor melakukan seperti ini.

'use client'
import { useState, useEffect } from 'react'

Membuat Tipe Data (Typescript)

Selanjutnya kita akan membuat tipe data yang akan kita gunakan.

NOTE

Apabila Anda tidak menggunakan Typescript, Anda bisa melewati langkah ini.

type ScreenSize = {
  width: number
  height: number
}

Membuat Hooks

Selanjutnya kita akan membuat fungsi useScreenSize yang akan kita gunakan.

const useScreenSize = () => {
  const [screenSize, setScreenSize] = useState({
    width: 0,
    height: 0,
  })
  const [isClient, setIsClient] = useState(false)

  useEffect(() => {
    setIsClient(true)

    const handleResize = () => {
      setScreenSize({
        width: window.innerWidth,
        height: window.innerHeight,
      })
    }

    handleResize()

    window.addEventListener('resize', handleResize)

    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  if (!isClient) {
    return undefined
  }

  if (screenSize.width <= 374) {
    return 'Mobile XS'
  } else if (screenSize.width >= 375 && screenSize.width <= 424) {
    return 'Mobile M'
  } else if (screenSize.width >= 425 && screenSize.width <= 765) {
    return 'Mobile L'
  } else if (screenSize.width >= 768 && screenSize.width <= 1023) {
    return 'Tablet'
  } else if (screenSize.width >= 1024 && screenSize.width <= 1439) {
    return 'Laptop'
  } else if (screenSize.width >= 1440 && screenSize.width <= 2559) {
    return 'Laptop LG'
  } else if (screenSize.width >= 2560) {
    return 'Laptop XL'
  }

  return undefined
}

export default useScreenSize

Penggunaan

Lalu bagaimana cara menggunakannya? berikut adalah cara menggunakannya.

'use client'; // Jika Anda menggunakan Next.js App Router
import React from 'react';

import useScreenSize from '@/hooks/useScreenSize';

const Page = () => {
  const screenSize = useScreenSize();

  return (
    <section className="flex items-center justify-center mx-auto min-h-screen">
      <h1>{screenSize}</h1>
    </section>
  );
};

export default Page;

Ikuti Saya!

Github Instagram X Linkedin Email