🌍 @malahimdev/global-state

⚡ Tiny, zero-boilerplate global state manager for React & Next.js — inspired by Zustand.
No Context. No Providers. 100% TypeScript. React 18+ ready.

🚀 Features

• 🧠 Zustand-like API – create multiple global stores with ease
• ⚙️ No Providers needed – works directly with useSyncExternalStore
• 🧩 Tiny & Fast – less than 1KB gzipped
• 💙 TypeScript first – full type inference
• 🌈 Works in Next.js App Router – perfect for modern projects

📦 Installation

npm install @malahimdev/global-state
# or
yarn add @malahimdev/global-state

🧠 Basic Usage

1️⃣ Create a Store

Create your store inside /store/counter.ts:

"use client";
import { createGlobalStore } from "@malahimdev/global-state";

interface CounterState {
  count: number;
}

export const counterStore = createGlobalStore<CounterState>({
  count: 0,
});

2️⃣ Use It Anywhere

You can access or update the state from any component or page:

"use client";
import { counterStore } from "@/store/counter";

export default function CounterPage() {
  const [counter, setCounter] = counterStore.useStore();

  return (
    <div>
      <h1>Count: {counter.count}</h1>
      <button onClick={() => setCounter((prev) => ({ count: prev.count + 1 }))}>
        Increment
      </button>
    </div>
  );
}

✅ No need to wrap your app in any provider — it just works.

🧩 Multiple Stores Example

Create multiple independent global stores easily.

// /store/user.ts
"use client";
import { createGlobalStore } from "@malahimdev/global-state";

interface UserState {
  name: string;
  loggedIn: boolean;
}

export const userStore = createGlobalStore<UserState>({
  name: "Guest",
  loggedIn: false,
});

Use it side-by-side:

"use client";
import { counterStore } from "@/store/counter";
import { userStore } from "@/store/user";

export default function HomePage() {
  const [counter, setCounter] = counterStore.useStore();
  const [user, setUser] = userStore.useStore();

  return (
    <div>
      <p>User: {user.name}</p>
      <p>Count: {counter.count}</p>
      <button onClick={() => setCounter((p) => ({ count: p.count + 1 }))}>
        Increment
      </button>
      <button
        onClick={() =>
          setUser(user.loggedIn ? { loggedIn: false, name: "Guest" } : { loggedIn: true, name: "Malahim" })
        }
      >
        {user.loggedIn ? "Logout" : "Login"}
      </button>
    </div>
  );
}

Access it in any component

"use client";
import Link from "next/link";
import { counterStore } from "@/store/counter";
import { userStore } from "@/store/user";

export default function OtherPage() {
  const [counter] = counterStore.useStore();
  const [user] = userStore.useStore();

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-pink-600 via-purple-600 to-indigo-600 text-white px-6">
      <div className="bg-white/10 p-6 sm:p-10 rounded-2xl text-center w-full max-w-md shadow-2xl">
        <h1 className="text-3xl sm:text-5xl font-extrabold mb-6 text-yellow-300">
          ⚡ Live Global State
        </h1>
        <p className="text-lg mb-4">👤 User: {user.name}</p>
        <p className="text-lg mb-6">🔥 Count: {counter.count}</p>
        <Link href="/" className="text-indigo-200 underline">
          ← Back to Home
        </Link>
      </div>
    </div>
  );
}

✅ Both pages stay perfectly synced — count and user changes reflect instantly!

📜 License

MIT © Malahim Haseeb (https://www.malahim.dev)