@godgpt/react

React bindings for the GodGPT SDK with hooks and provider.

Installation

npm install @godgpt/core @godgpt/react
# or
pnpm add @godgpt/core @godgpt/react
# or
yarn add @godgpt/core @godgpt/react

Usage

Setup Provider

import { createSDK } from "@godgpt/core";
import { AuthModule } from "@godgpt/auth";
import { I18nModule } from "@godgpt/i18n";
import { SDKProvider } from "@godgpt/react";

// Create and configure SDK
const sdk = createSDK();
sdk.use(new AuthModule());
sdk.use(new I18nModule({ /* config */ }));

function App() {
  return (
    <SDKProvider
      sdk={sdk}
      onReady={() => console.log("SDK ready!")}
      onError={(error) => console.error(error)}
    >
      <MyApp />
    </SDKProvider>
  );
}

useSDK Hook

import { useSDK, useSDKReady } from "@godgpt/react";

function MyComponent() {
  const sdk = useSDK();
  const isReady = useSDKReady();

  if (!isReady) {
    return <div>Loading...</div>;
  }

  return <div>SDK is ready!</div>;
}

useAuth Hook

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

function AuthStatus() {
  const {
    isAuthenticated,
    isLoading,
    user,
    signIn,
    signOut,
  } = useAuth();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (isAuthenticated) {
    return (
      <div>
        <p>Welcome, {user?.name}!</p>
        <button onClick={() => signOut()}>Sign Out</button>
      </div>
    );
  }

  return (
    <button onClick={() => signIn("google")}>
      Sign In with Google
    </button>
  );
}

useTranslation Hook

import { useTranslation } from "@godgpt/react";

function MyComponent() {
  const { t, locale, setLocale, supportedLocales } = useTranslation();

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <p>{t("greeting", { name: "World" })}</p>

      <select value={locale} onChange={(e) => setLocale(e.target.value)}>
        {supportedLocales.map((loc) => (
          <option key={loc} value={loc}>{loc}</option>
        ))}
      </select>
    </div>
  );
}

useEvent Hook

import { useEvent, useEmit } from "@godgpt/react";

function EventComponent() {
  const emit = useEmit();

  // Subscribe to events
  useEvent("custom:event", (data) => {
    console.log("Event received:", data);
  });

  // Emit events
  const handleClick = () => {
    emit("custom:event", { message: "Hello!" });
  };

  return <button onClick={handleClick}>Emit Event</button>;
}

useApi Hook

import { useApi } from "@godgpt/react";

function DataComponent() {
  const api = useApi();
  const [users, setUsers] = useState([]);

  useEffect(() => {
    api.get("/users").then(setUsers);
  }, [api]);

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

API Reference

Components

<SDKProvider>

Props:

• sdk (SDK): The SDK instance
• onReady (function): Called when SDK is initialized
• onError (function): Called on initialization error

Hooks

useSDK()

Returns the SDK instance. Throws if used outside SDKProvider.

useSDKReady()

Returns true when SDK is initialized.

useAuth()

Returns auth state and methods:

• isAuthenticated: boolean
• isLoading: boolean
• user: User object or null
• signIn(provider, options?): Sign in function
• signOut(): Sign out function

useTranslation()

Returns i18n state and methods:

• t(key, options?): Translation function
• locale: Current locale
• setLocale(locale): Change locale
• supportedLocales: Array of supported locales

useEvent(event, callback)

Subscribe to SDK events. Automatically unsubscribes on unmount.

useEmit()

Returns a function to emit SDK events.

useApi()

Returns the API module instance.

License

MIT