Skip to content

XplorationTechnologies/react-custom-hooks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

📦 React Custom Hooks Library

npm version MIT License Made with ❤️

Koleksi custom React hooks dari Xploration Technology, dirancang untuk memenuhi berbagai kebutuhan aplikasi frontend modern secara efisien dan elegan. Cocok digunakan untuk project production, side project, maupun eksperimen pribadi.


🚀 Instalasi

npm install @xplorationtechnology/react-custom-hooks

Lalu gunakan dalam project React kamu seperti ini:

import {
  useClipboard,
  useWindowResize,
} from "@xplorationtechnology/react-custom-hooks";

🧩 Daftar Hooks

🔹 useClipboard

Hook untuk menyalin teks ke clipboard dan memberikan umpan balik berupa status copied.

✅ Contoh Implementasi useClipboard

const { copy, copied } = useClipboard();

<button onClick={() => copy('Hello!')}>Salin</button>
<span>{copied ? 'Berhasil disalin' : 'Belum disalin'}</span>

🔁 API

  • copy(text: string): Menyalin teks ke clipboard
  • copied: boolean: Menunjukkan apakah teks telah berhasil disalin

🔹 useWindowResize

Hook untuk memantau ukuran jendela browser secara real-time dan memberikan informasi terkait breakpoint.

✅ Contoh Implementasi useWindowResize

const { width, height, breakpoint } = useWindowResize();

<p>Width: {width}</p>
<p>Height: {height}</p>
<p>Breakpoint: {breakpoint}</p>

📐 Breakpoint TailwindCSS

  • xs: <640px
  • sm: ≥640px
  • md: ≥768px
  • lg: ≥1024px
  • xl: ≥1280px

📄 Lisensi

MIT License — Bebas digunakan untuk kebutuhan pribadi maupun komersial.


Dibuat dengan ❤️ oleh Xploration Technology

About

Koleksi React hooks siap pakai untuk keperluan proyek frontend — simpel, modular, dan TypeScript-ready.

Topics

Resources

License

Stars

Watchers

Forks

Contributors