npm package: @godgpt/react
Description: React bindings for GodGPT SDK with hooks and provider
Author: GodGPT
Latest version: 0.1.1

# @godgpt/react

React bindings for the GodGPT SDK with hooks and provider.

## Installation

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

## Usage

### Setup Provider

```tsx
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

```tsx
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

```tsx
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

```tsx
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

```tsx
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

```tsx
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