hybridstate

Provider gerektirmeyen, Context bağımsız ve minimal bir yapıya sahip, güçlü bir React state yönetim paketidir.

Nedir Hybrid State?

hybridstate hem local hem de global state'i yönetmek için tasarlanmış, modern React projeleri için minimal ve güçlü bir pakettir. Provider veya Context'e ihtiyaç yok. Diğer global state yönetim araçlarına modern, hafif ve kolay bir alternatif sunar.

• Kullanımı useState gibi: Hemen alışkanlık kazanırsınız.
• Provider yok, Context yok: Ekstra kurulum veya provider'a gerek yok.
• Global state: İstediğiniz yerde, istediğiniz kadar paylaşın.
• Her türlü state: Primitif, obje, dizi, derin yapılar.
• setState(prev => ...) desteği.
• TypeScript ile güvenli.
• Çok hafif ve modern React (18+) ile uyumlu.
• Kalıcı (persistent) state: localStorage ile otomatik saklama.

Kurulum

npm install hybridstate

yarn add hybridstate

pnpm i hybridstate

Hızlı Başlangıç

Local State (useState gibi)

import { useHybrid } from "hybridstate";

// Aynı useState gibi
const [open, setOpen] = useHybrid<boolean>(false);
// ya da key ekleyerek
const [open, setOpen] = useHybrid<boolean>("isOpen", false);

Global State (paylaşımlı)

const [open, setOpen] = useHybrid<boolean>("isOpen", false, true);

Kalıcı (Persistent) State

const [tema, setTema] = useHybrid<string>("tema", "light", false, true);
// veya global ve kalıcı:
const [tema, setTema] = useHybrid<string>("tema", "light", true, true);

Not: persistent parametresi true ise, state localStorage'da saklanır ve sayfa yenilendiğinde otomatik olarak geri yüklenir.

Obje ile Kullanım

const [kullanici, setKullanici] = useHybrid<{ ad: string }>("kullanici", {
  ad: "Anilcan",
});

Derin Destructuring

const [{ ad }, setKullanici] = useHybrid<{ ad: string }>("kullanici", {
  ad: "Anilcan",
});

API

const [state, setState] = useHybrid<T>(
  key: string,
  initialValue: T,
  global?: boolean,      // Varsayılan: false
  persistent?: boolean   // Varsayılan: false
);

• key: State için benzersiz bir key.
• initialValue: Sadece ilk kullanımda geçerli.
• global: true ise aynı key ile tüm componentlerde paylaşılır.
• persistent: true ise state localStorage'da saklanır ve geri yüklenir.

Kullanım Örnekleri

Global Prototip

const [sayac, setSayac] = useHybrid("sayac", 0, true);
setSayac((prev) => prev + 1);

Global ve Kalıcı Prototip

const [sayac, setSayac] = useHybrid("sayac", 0, true, true);
// Sayac değeri localStorage'da saklanır ve global olarak paylaşılır.

Local ve Kalıcı State

const [tema, setTema] = useHybrid("tema", "light", false, true);
// Tema değeri localStorage'da saklanır, sadece bu componentte kullanılır.

Global Obje

type Kullanici = {
  ad: string;
  bilgi: {
    dil: "tr" | "en";
    yas: number;
  };
};

const baslangic: Kullanici = {
  ad: "Anil",
  bilgi: {
    dil: "tr",
    yas: 25,
  },
};

const [kullanici, setKullanici] = useHybrid<Kullanici>(
  "kullanici",
  baslangic,
  true
);

// Sadece bir alanı güncelle (deep merge korunur)
setKullanici({ ad: "Anilcan" });

// Önceki state'e göre güncelle
setKullanici((prev) => ({ bilgi: { yas: prev.bilgi.yas + 1 } }));

// Derin güncelleme
setKullanici((prev) => {
  prev.bilgi.dil = "en";
  return prev;
});

Derin Güncellemeler

setKullanici({ bilgi: { dil: "en" } }); // Diğer alanlar silinmez

Ayrıca önceki state'e göre yeni state dönebilirsiniz:

setKullanici((prev) => {
  prev.bilgi.dil = "en";
  return prev;
});

Farklı Componentlerde Global State Paylaşımı

Aynı key ve global:true ile farklı componentlerde aynı state'i paylaşabilirsiniz:

ComponentA.tsx

import { useHybrid } from "hybridstate";

export function ComponentA() {
  const [sayac, setSayac] = useHybrid("paylasilan-sayac", 0, true);
  return (
    <div>
      <h3>Component A</h3>
      <p>Sayac: {sayac}</p>
      <button onClick={() => setSayac((prev) => prev + 1)}>Arttır</button>
    </div>
  );
}

ComponentB.tsx

import { useHybrid } from "hybridstate";

export function ComponentB() {
  const [sayac] = useHybrid("paylasilan-sayac", 0, true);
  return (
    <div>
      <h3>Component B</h3>
      <p>A'dan gelen sayac: {sayac}</p>
    </div>
  );
}

Kalıcı State Debug

Global veya Local kalıcı state'i console'da görmek için:

import { useHybrid, debugGlobalStore } from "hybridstate";

const [sayac, setSayac] = useHybrid("sayac", 0, true, true);

useEffect(() => {
  debugGlobalStore();
}, [sayac]);

Not: debugGlobalStore sadece global state'leri gösterir.