npm package: @malahimdev/global-state
Description: Tiny global state manager for React/Next.js
Latest version: 1.2.1

# 🌍 @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

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

---

# 🧠 Basic Usage

## 1️⃣ Create a Store

Create your store inside /store/counter.ts:

```bash
"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:

```bash
"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.

```bash
// /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:

```bash
"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

```bash
"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)