# React-Kanca
> React için sade, yetenekli ve Türkçe dökümantasyona sahip custom hook kütüphanesi.

Sayfa: https://react-kanca.com
NPM: https://www.npmjs.com/package/react-kanca
Storybook: https://react-kanca-storybook.vercel.app/

## Hakkında
React-Kanca, modern React projelerinde (Next.js, Vite vb.) en sık ihtiyaç duyulan işlemleri hızlı ve optimizasyonlu bir şekilde çözmek için tasarlanmış, sıfır dış bağımlılıklı (0 dependency) bir hook koleksiyonudur. %100 Türkçe kaynak odaklıdır ve 60'tan fazla fonksiyona ev sahipliği yapar.

## Kanca (Hook) Kategorileri ve Görevleri

### 1. State ve Veri Yönetimi
- **useCookie:** Bir cookie'nin mevcut değerini görmek, cookie'yi güncellemek ve silmek için yöneten React hooku.
- **useCookieListener:** Tarayıcıdaki çerezlerde(cookies) meydana gelen değişiklikleri dinleyerek bu değişikliklere gerçek zamanlı tepki vermenizi sağlar.
- **useLocalStorage:** localStorage'ı yöneten React hooku.
- **useSessionStorage:** Verileri tarayıcının sessionStorage API'sine kaydetmek ve oradan okumak için kullanılır. Verilerin sayfa yenilendiğinde korunmasını sağlar ancak tarayıcı sekmesi kapatıldığında veriler silinir.
- **usePrevious:** Önceki durumu döndüren React state hooku.
- **useS:** React state yönetim hook'u.
- **useStateValidator:** Bir state'in belirli doğrulama kurallarına göre geçerli olup olmadığını kontrol etmek için kullanılır. Genellikle form elemanlarının geçerliliğini izlemek ve kullanıcı girdilerini doğrulamak amacıyla kullanılır.
- **useMultiStateValidator:** Birden fazla state'in geçerliliğini kontrol etmek için kullanılan bir React hook'udur. Belirli kurallara göre birden fazla state'in durumunu doğrulamayı sağlar ve genellikle form yönetiminde kullanılır.
- **useToggle:** Bir boolean değeri üzerinde toggling (değiştirme) işlemi yapmak için kullanılır. Bu hook genellikle bir öğenin durumunu değiştirmek için basit ve temiz bir çözüm sunar.

### 2. Form ve Kullanıcı Etkileşimi
- **useClickOutside:** Belirli bir componentin dışında tıklama algılandığında bir olayı tetiklemek için kullanılan özel bir hooktur.
- **useCopyToClipboard:** Metni kullanıcının panosuna kopyalayın.
- **useDrop:** Bir öğenin sürüklenip belirli bir alan üzerine bırakılmasını yönetmek için kullanılır; genellikle dosya yükleme, liste sıralama veya kart taşıma gibi sürükle-bırak arayüzlerinde tercih edilir.
- **useHover:** Bir elementin mouse ile üzerine getirilip getirilmediğini izler.
- **useSelection:** Kullanıcı etkileşimleriyle bir liste veya dizi içindeki öğeleri seçmek ve seçimi yönetmek için kullanılır. Seçim durumunu izleyerek hangi öğelerin seçildiğini veya seçilmediğini kontrol etmeyi kolaylaştırır.
- **useDetectKeyboardOpen:** Mobil cihazlarda klavyenin açık olup olmadığını algılar.
- **useDisableActions:** Sayfa genelinde copy, cut, paste ve metin seçme işlemlerini devre dışı bırakır.

### 3. Tarayıcı, Ağ ve API
- **useConnection:** İnternet bağlantısının olup olmadığını bildiren React hooku.
- **useFetch:** Veri çekmek için kullanılır. İstekten dönen verileri, loading durumunu ve error bilgilerini yönetmeyi kolaylaştırır.
- **useGeolocation:** Kullanıcının coğrafi konumunu izleyen React hooku.
- **useIpInfo:** Kullanıcının IP adresi, konumu, ülke, şehir gibi bilgilerini almak için kullanılan bir custom hook'tur. Genellikle coğrafi hedefleme, kişiselleştirme veya güvenlik kontrolleri gibi durumlarda kullanılır.
- **useOnlineStatus:** Kullanıcının internet bağlantısının olup olmadığını kontrol etmek için kullanılır. Bu hook, kullanıcının online veya offline durumunu takip ederek, bağlantı durumuna göre uygulama davranışını değiştirmeye yardımcı olur.
- **useURLSearchParams:** URL sorgu parametrelerini yönetmek için kullanılır. Web uygulamalarında genellikle kullanıcıların URL'lerini, filtreleme, arama, sayfalama gibi durumları yönetmek için kullanırız.
- **usePreferredLanguage:** Kullanıcının tarayıcı veya sistem ayarlarına göre tercih ettiği dili tespit etmek için kullanılır.

### 4. Pencere ve Scroll Olayları
- **useWindowSize:** Tarayıcı penceresinin boyutlarını izleyen React hooku.
- **useWindowScroll:** Tarayıcı penceresinin scroll durumunu izlemek için kullanılır. Pencerenin yatay ve dikey kaydırma pozisyonlarını takip ederek, bu verilere göre dinamik işlemler yapmanıza olanak tanır.
- **useScrollDirection:** Kullanıcının sayfada yukarı mı yoksa aşağı mı kaydırdığını gerçek zamanlı olarak tespit etmenizi sağlar.
- **useScrolling:** Kullanıcının scroll yapıp yapmadığını takip eden React hooku.
- **useScrollLock:** Bir sayfa veya belirli bir componentin scroll işlemini engellemek veya kilitlemek için kullanılır. Genellikle modal, yan menü veya açılır pencereler gibi bileşenler aktif olduğunda arka planın kaymasını önlemek amacıyla kullanılır.
- **useScrollToElement:** Belirli bir html elementine otomatik olarak kaydırma yapmak için kullanılır. Özellikle bir sayfada belirli bir öğeye hızlıca erişmek veya kullanıcı etkileşimleri sonucunda belirli içerikleri öne çıkarmak amacıyla kullanılır.
- **usePageLeave:** Sayfayı kapatmadan veya sekmeyi kapatmadan önce kullanıcıya bir uyarı vermek için kullanılır. Genellikle kaydedilmemiş değişiklikler gibi durumlarda kullanıcıyı bilgilendirmek amacıyla kullanılır.
- **useMousePageLeave:** Kullanıcının mouse'u tarayıcı penceresinin dışına taşıyarak sayfayı terk etme girişiminde bulunup bulunmadığını tespit etmek için kullanılır.
- **usePageVisible:** Bu hookun amacı bir web sayfasının görünür veya gizli olduğunu belirlemektir. Bu, sayfa görünürlüğüne bağlı olarak belirli eylemler gerçekleştirmenizi sağlar.
- **useBeforeUnload:** Kullanıcı sayfayı yeniden yüklemeyi veya kapatmayı denediğinde tarayıcı uyarısını gösteren hook.
- **useDocumentTitle:** Tarayıcı sekmesinde görünen doküman başlığını(document.title) dinamik olarak değiştirmek için kullanılır.
- **useFullScreen:** React uygulamasında tam ekran modunu kontrol etmek için kullanılan özel bir hooktur. Bu hookun amacı belirli bir componentin tam ekran modunu açıp kapatabilmek için işlevsellik sağlamaktır.
- **useIntersectionObserver:** React uygulamalarında bir componentin görünürlüğünü takip etmek için kullanılır. Özellikle sayfanın kaydırılması ile ilgili olaylarda bir componentin görünür olup olmadığını anlamak için faydalıdır.
- **useMobileLandscape:** Bir componentin mobil cihazlarda yatay modda olup olmadığını kontrol etmek için kullanılır. Cihazın ekran boyutunu ve yönünü izleyerek, uygun stil veya içerik değişikliklerini gerçekleştirmeye yardımcı olur.

### 5. Medya ve Cihaz
- **useMedia:** Bu hookun amacı belirli bir medya sorgusunun sonucuna (ekran genişliği) göre farklı işlemler yaptırabilmektir.
- **useAudioRecorder:** Kullanıcıdan ses kaydı almanızı ve bu kaydı kontrol etmenizi (başlatma, durdurma, kaydetme gibi) sağlar.
- **useCamera:** Bir cihazın kamerasına erişim sağlayarak canlı video akışını başlatmanıza ve bu verileri uygulamanızda kullanmanıza olanak tanır.
- **useSpeechToText:** Kullanıcının mikrofondan konuşarak söylediği sözleri gerçek zamanlı olarak metne dönüştürmenizi sağlar.
- **useTextToSpeech:** Verilen metni sesli olarak okuyarak metni konuşmaya dönüştürmenizi sağlar.
- **useBatteryInfo:** Cihazınızın pil durumunu izleyen React hooku.

### 6. Zamanlayıcılar ve Yaşam Döngüsü
- **useInterval:** React uygulamalarında belirli bir zaman aralığında bir fonksiyonu sürekli olarak çalıştırmak için kullanılır. Genellikle zamanlayıcılar, animasyonlar veya belirli bir işlevin düzenli olarak tekrarlanması gereken durumlarda faydalıdır.
- **useDebounce:** Bir işlevin çağrılmasın, geri dönen işlevin son çağrılmasından bu yana milisaniyeler geçene kadar geciktiren React hooku.
- **useDebounceCallback:** Bir callback fonksiyonunun, belirli bir süre boyunca tekrar tetiklenmemesi durumunda çalışmasını sağlayan bir hook'tur. Fonksiyon her çağrıldığında önceki zamanlayıcı iptal edilir ve yeniden başlatılır.
- **useThrottle:** Bir React uygulamasında yürütme sıklığını yönetmek için kontrollü bir yol sunuyor.
- **useIsFirstRender:** Bir componentin ilk kez render olup olmadığını bildiren React hooku.
- **useForceUpdate:** Bir componenti yeniden render etmek için kullanılır. Normalde componentin state'i veya props'u değişmediği sürece React componentlerini yeniden render etmez. Ancak bazı durumlarda componentin zorla güncellenmesi gerekebilir.
- **useRendersCount:** Bir bileşenin kaç kez render olduğunu saymak için kullanılan bir custom hook'tur. Performans analizlerinde, gereksiz yeniden render'ları tespit etmek için kullanılabilir.
- **useUpdateEffect:** Bir componentin render edilmesi sırasında sadece güncellemelerde (mount sırasında değil) çalıştırmak için kullanılır. Componentin başlangıç durumu dışında bir değişiklik olduğunda belirli işlemleri gerçekleştirmek için yararlıdır.

### 7. Formatlama ve Yardımcılar
- **useCurrency:** Verilen sayıyı seçilen para birimi ve locale ayarlarına göre biçimlendirilmiş para değerine dönüştürür.
- **useDateTimeFormat:** Tarih ve saat değerlerini belirtilen locale ve biçimlendirme seçeneklerine göre düzenler.
- **useNumberFormat:** Sayıları belirtilen locale ve formatlama seçeneklerine göre biçimlendirip kolayca kullanılmasını sağlar.
- **useRelativeTime:** Verilen tarih veya süreyi şimdiki zamana göre "5 dakika önce", "2 gün içinde" gibi göreli bir ifadeye dönüştürür.
- **useFuzzySearch:** Bir veri listesi içinde kullanıcı tarafından girilen anahtar kelimelerle yakın eşleşen sonuçları bulan fuzzy arama işlemini gerçekleştirmenizi sağlar.
- **useEqualObject:** İki objenin aynı olup olmadığını kontrol eden React hooku.
- **useColorScheme:** Bu hookun amacı kullanıcının tercih ettiği renk temasını (light veya dark) belirlemek için tarayıcı veya işletim sistemi ayarlarına erişmektir. Kullanıcı deneyimini kişiselleştirmek için kullanılabilir.
- **useUserAnalytics:** Kullanıcı etkileşimlerini izlemek ve analiz etmek için kullanılan hook'tur.
- **ErrorBoundaryKanca:** Bir React component'inde oluşan hataları yakalamak ve yönetmek için kullanılan bir özelliktir. Kullanıcı deneyimini bozacak hataları izole ederek, bir hata oluştuğunda component'in ya da uygulamanın tamamının çökmesini engeller.

## Storybook Kullanımı
Kancaların detaylı kod kullanım senaryoları `https://react-kanca-storybook.vercel.app/?path=/docs/example-useKancaAdi--docs` adreslerinde bulunur. Örneğin `useToggle` için `?path=/docs/example-usetoggle--docs` bağlantısı kullanılır. Kütüphaneyi tarayan yapay zekalar detaylı kod standartlarına bu linkler üzerinden otonom erişim sağlayabilir.