@lacspace/react

React hooks and a provider for the Lacspace SDK — useAuth, useQuery, useLacspace.

Wrap your app once, then call the hooks anywhere — all sharing one authenticated SDK client. React 18+.

Install

npm install @lacspace/react @lacspace/sdk react

Setup

import { LacspaceProvider } from "@lacspace/react";

export function App() {
  return (
    <LacspaceProvider options={{ baseURL: "https://api.lacspace.com/api" }}>
      <Routes />
    </LacspaceProvider>
  );
}

useAuth

import { useAuth } from "@lacspace/react";

function LoginForm() {
  const { login, user, loading, error } = useAuth();

  if (user) return <p>Welcome, {user.username ?? user.email}!</p>;

  return (
    <form onSubmit={(e) => { e.preventDefault();
      const f = new FormData(e.currentTarget);
      login({ email: String(f.get("email")), password: String(f.get("password")) });
    }}>
      <input name="email" type="email" />
      <input name="password" type="password" />
      <button disabled={loading}>{loading ? "Signing in…" : "Sign in"}</button>
      {error && <p role="alert">{error.message}</p>}
    </form>
  );
}

useQuery

Fetch anything from the SDK with loading/error state and refetch:

import { useQuery } from "@lacspace/react";

function Products() {
  const { data, loading, error, refetch } = useQuery((sdk) => sdk.ecommerce.getProducts());

  if (loading) return <Spinner />;
  if (error)   return <button onClick={refetch}>Retry</button>;
  return <ul>{data!.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
}

// Re-run when a dependency changes:
const { data } = useQuery((sdk) => sdk.api.get(`products/${id}`), [id]);

useLacspace

Grab the raw SDK for anything the hooks don't cover:

import { useLacspace } from "@lacspace/react";

function BuyButton() {
  const lac = useLacspace();
  return <button onClick={() => lac.analytics.track("cta_clicked")}>Buy</button>;
}

API

• <LacspaceProvider options={…} | client={…}> — provides one shared SDK
• useLacspace() → the LacspaceSDK instance
• useAuth() → { user, loading, error, login, register, logout }
• useQuery(fetcher, deps?) → { data, loading, error, refetch }

The Lacspace family

| Package | For | | --- | --- | | @lacspace/react | React hooks (this package) | | @lacspace/sdk | Everything in one client | | @lacspace/api | The core HTTP client | | @lacspace/auth | Login, register, tokens | | @lacspace/analytics | Event tracking | | @lacspace/nepali-date | Bikram Sambat dates | | @lacspace/nepali-utils | Nepal helpers |

Licensing

This package is free under the Lacspace Free Licence — MIT-equivalent freedoms. Use it in personal and commercial projects at no cost; just keep the notice.

Not every Lacspace package is free. We also offer Commercial (paid), Client-specific, and Private (proprietary) packages under separate terms. See the full Lacspace Licence Centre.

Part of the Lacspace ecosystem — 35 zero-dependency, isomorphic TypeScript packages.

All packages ↗ · npm org ↗ · Licence Centre ↗ · GitHub ↗