@kitbase/messaging-react 0.1.0

package/README.md

@@ -0,0 +1,146 @@
+# @kitbase/messaging-react
+
+React bindings for the Kitbase In-App Messaging SDK. Provides a provider and hooks for automatic or custom message rendering.
+
+## Installation
+
+```bash
+npm install @kitbase/messaging-react
+# or
+pnpm add @kitbase/messaging-react
+# or
+yarn add @kitbase/messaging-react
+```
+
+Peer dependency: `react >= 17`
+
+## Quick Start
+
+### Auto-render (default)
+
+Wrap your app with the provider — messages appear automatically with no extra code:
+
+```tsx
+import { MessagingProvider } from '@kitbase/messaging-react';
+
+function App() {
+  return (
+    <MessagingProvider config={{ sdkKey: 'your-sdk-key', userId: user.id }}>
+      <YourApp />
+    </MessagingProvider>
+  );
+}
+```
+
+### Custom rendering
+
+Set `autoShow: false` and use the `useMessages` hook to render your own UI:
+
+```tsx
+import { MessagingProvider, useMessages } from '@kitbase/messaging-react';
+
+function App() {
+  return (
+    <MessagingProvider config={{ sdkKey: 'your-sdk-key', autoShow: false }}>
+      <MessageList />
+    </MessagingProvider>
+  );
+}
+
+function MessageList() {
+  const { messages, markViewed, isLoading } = useMessages({
+    pollInterval: 60_000,
+  });
+
+  if (isLoading) return <Spinner />;
+
+  return messages.map((msg) => (
+    <div key={msg.id}>
+      <h3>{msg.title}</h3>
+      <p>{msg.body}</p>
+      {msg.actionButton && (
+        <a href={msg.actionButton.url}>{msg.actionButton.text}</a>
+      )}
+      <button onClick={() => markViewed(msg.id)}>Dismiss</button>
+    </div>
+  ));
+}
+```
+
+## API
+
+### `<MessagingProvider>`
+
+| Prop | Type | Description |
+|---|---|---|
+| `config` | `MessagingConfig` | SDK configuration (see [@kitbase/messaging](https://www.npmjs.com/package/@kitbase/messaging)) |
+| `children` | `ReactNode` | Your app |
+
+The provider creates a `Messaging` instance and cleans it up on unmount. It recreates the instance when `sdkKey` changes.
+
+### `useMessages(options?)`
+
+Fetches messages with optional polling. For use with `autoShow: false`.
+
+**Options:**
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `enabled` | `boolean` | `true` | Whether to fetch on mount |
+| `pollInterval` | `number` | — | Polling interval in ms. Omit to disable |
+| `userId` | `string` | — | User ID for filtering |
+| `metadata` | `Record<string, string>` | — | Targeting metadata |
+
+**Returns:** `UseMessagesResult`
+
+| Field | Type | Description |
+|---|---|---|
+| `messages` | `InAppMessage[]` | Active messages |
+| `isLoading` | `boolean` | Initial fetch in progress |
+| `error` | `Error \| null` | Most recent fetch error |
+| `markViewed` | `(messageId: string) => Promise<void>` | Mark as viewed and remove from list |
+| `refresh` | `() => Promise<void>` | Manually re-fetch |
+
+### `useLazyMessages()`
+
+Fetch messages on demand (not on mount).
+
+```tsx
+function InboxButton() {
+  const { fetch, messages, isLoading } = useLazyMessages();
+
+  return (
+    <>
+      <button onClick={() => fetch()}>Check Messages</button>
+      {messages.map((msg) => <div key={msg.id}>{msg.title}</div>)}
+    </>
+  );
+}
+```
+
+### `useMessagingContext()`
+
+Access the underlying `Messaging` instance directly for advanced usage (e.g., calling `identify()`, `reset()`).
+
+```tsx
+const messaging = useMessagingContext();
+messaging.identify('user_123');
+```
+
+## TypeScript
+
+All core types are re-exported for convenience:
+
+```typescript
+import type {
+  MessagingConfig,
+  InAppMessage,
+  MessageType,
+  MessageButton,
+  GetMessagesOptions,
+} from '@kitbase/messaging-react';
+```
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,165 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  MessagingProvider: () => MessagingProvider,
+  useLazyMessages: () => useLazyMessages,
+  useMessages: () => useMessages,
+  useMessagingContext: () => useMessagingContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider.tsx
+var import_react2 = require("react");
+var import_messaging = require("@kitbase/messaging");
+
+// src/context.ts
+var import_react = require("react");
+var MessagingContext = (0, import_react.createContext)(null);
+function useMessagingContext() {
+  const context = (0, import_react.useContext)(MessagingContext);
+  if (!context) {
+    throw new Error(
+      'useMessagingContext must be used within a MessagingProvider. Wrap your component with <MessagingProvider config={{ sdkKey: "..." }}>'
+    );
+  }
+  return context;
+}
+
+// src/provider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function MessagingProvider({ config, children }) {
+  const configRef = (0, import_react2.useRef)(config);
+  configRef.current = config;
+  const client = (0, import_react2.useMemo)(
+    () => new import_messaging.Messaging(config),
+    // Recreate when sdkKey changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [config.sdkKey]
+  );
+  (0, import_react2.useEffect)(() => {
+    return () => {
+      client.close();
+    };
+  }, [client]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessagingContext.Provider, { value: client, children });
+}
+
+// src/use-messages.ts
+var import_react3 = require("react");
+function useMessages(options) {
+  const messaging = useMessagingContext();
+  const [messages, setMessages] = (0, import_react3.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const enabled = options?.enabled ?? true;
+  const pollInterval = options?.pollInterval;
+  const optionsRef = (0, import_react3.useRef)(options);
+  optionsRef.current = options;
+  const fetchMessages = (0, import_react3.useCallback)(async () => {
+    try {
+      const msgs = await messaging.getMessages(optionsRef.current);
+      setMessages(msgs);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    }
+  }, [messaging]);
+  (0, import_react3.useEffect)(() => {
+    if (!enabled) {
+      setIsLoading(false);
+      return;
+    }
+    let active = true;
+    messaging.getMessages(optionsRef.current).then((msgs) => {
+      if (active) {
+        setMessages(msgs);
+        setIsLoading(false);
+      }
+    }).catch((err) => {
+      if (active) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      }
+    });
+    let tid;
+    if (pollInterval && pollInterval > 0) {
+      tid = setInterval(() => {
+        if (active) fetchMessages();
+      }, pollInterval);
+    }
+    return () => {
+      active = false;
+      if (tid) clearInterval(tid);
+    };
+  }, [enabled, pollInterval, fetchMessages, messaging]);
+  const markViewed = (0, import_react3.useCallback)(
+    async (messageId) => {
+      setMessages((prev) => prev.filter((m) => m.id !== messageId));
+      await messaging.markViewed(messageId);
+    },
+    [messaging]
+  );
+  return { messages, isLoading, error, markViewed, refresh: fetchMessages };
+}
+function useLazyMessages() {
+  const messaging = useMessagingContext();
+  const [messages, setMessages] = (0, import_react3.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const fetchMessages = (0, import_react3.useCallback)(
+    async (options) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const msgs = await messaging.getMessages(options);
+        setMessages(msgs);
+        return msgs;
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        return void 0;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [messaging]
+  );
+  const markViewed = (0, import_react3.useCallback)(
+    async (messageId) => {
+      setMessages((prev) => prev.filter((m) => m.id !== messageId));
+      await messaging.markViewed(messageId);
+    },
+    [messaging]
+  );
+  const reset = (0, import_react3.useCallback)(() => {
+    setMessages([]);
+    setError(null);
+  }, []);
+  return { fetch: fetchMessages, messages, isLoading, error, markViewed, reset };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MessagingProvider,
+  useLazyMessages,
+  useMessages,
+  useMessagingContext
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/provider.tsx","../src/context.ts","../src/use-messages.ts"],"sourcesContent":["// Provider\nexport { MessagingProvider } from './provider.js';\nexport type { MessagingProviderProps } from './provider.js';\n\n// Context hook (for advanced usage)\nexport { useMessagingContext } from './context.js';\n\n// Message hooks (data-only, for custom rendering)\nexport { useMessages, useLazyMessages } from './use-messages.js';\nexport type { UseMessagesResult } from './use-messages.js';\n\n// Types\nexport type { UseMessagesOptions, AsyncState } from './types.js';\n\n// Re-export core types for convenience\nexport type {\n  MessagingConfig,\n  InAppMessage,\n  MessageType,\n  MessageButton,\n  GetMessagesOptions,\n} from '@kitbase/messaging';\n","import { useMemo, useEffect, useRef, type ReactNode } from 'react';\nimport { Messaging, type MessagingConfig } from '@kitbase/messaging';\nimport { MessagingContext } from './context.js';\n\nexport interface MessagingProviderProps {\n  /** Messaging SDK configuration */\n  config: MessagingConfig;\n  children: ReactNode;\n}\n\n/**\n * Provider for in-app messaging.\n *\n * By default, messages are fetched and rendered automatically.\n * Pass `autoShow: false` in config to use data-only hooks instead.\n *\n * @example Auto-render (default)\n * ```tsx\n * <MessagingProvider config={{ sdkKey: 'your-key', userId: user.id }}>\n *   <App />\n * </MessagingProvider>\n * // Messages appear automatically — no extra code needed!\n * ```\n *\n * @example Data-only (custom rendering)\n * ```tsx\n * <MessagingProvider config={{ sdkKey: 'your-key', autoShow: false }}>\n *   <App />\n * </MessagingProvider>\n * // Then use useMessages() hook to render your own UI\n * ```\n */\nexport function MessagingProvider({ config, children }: MessagingProviderProps) {\n  const configRef = useRef(config);\n  configRef.current = config;\n\n  const client = useMemo(\n    () => new Messaging(config),\n    // Recreate when sdkKey changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [config.sdkKey],\n  );\n\n  useEffect(() => {\n    return () => {\n      client.close();\n    };\n  }, [client]);\n\n  return (\n    <MessagingContext.Provider value={client}>\n      {children}\n    </MessagingContext.Provider>\n  );\n}\n","import { createContext, useContext } from 'react';\nimport type { Messaging } from '@kitbase/messaging';\n\nexport const MessagingContext = createContext<Messaging | null>(null);\n\nexport function useMessagingContext(): Messaging {\n  const context = useContext(MessagingContext);\n\n  if (!context) {\n    throw new Error(\n      'useMessagingContext must be used within a MessagingProvider. ' +\n        'Wrap your component with <MessagingProvider config={{ sdkKey: \"...\" }}>',\n    );\n  }\n\n  return context;\n}\n","import { useState, useEffect, useCallback, useRef } from 'react';\nimport type { InAppMessage, GetMessagesOptions } from '@kitbase/messaging';\nimport { useMessagingContext } from './context.js';\nimport type { UseMessagesOptions } from './types.js';\n\nexport interface UseMessagesResult {\n  /** Active in-app messages */\n  messages: InAppMessage[];\n  /** Whether the initial fetch is in progress */\n  isLoading: boolean;\n  /** Error from the most recent fetch */\n  error: Error | null;\n  /**\n   * Mark a message as viewed. Removes it from the UI immediately\n   * and records the view on the server.\n   * Requires `identify()` to have been called on the messaging instance.\n   */\n  markViewed: (messageId: string) => Promise<void>;\n  /** Manually re-fetch messages */\n  refresh: () => Promise<void>;\n}\n\n/**\n * Hook to fetch in-app messages (data-only, for custom rendering).\n *\n * Use this with `autoShow: false` on the provider to build your own\n * message UI. For automatic rendering, just use the default provider\n * config and skip this hook.\n *\n * @example\n * ```tsx\n * function MessageList() {\n *   const { messages, markViewed, isLoading } = useMessages({\n *     pollInterval: 60_000,\n *   });\n *\n *   if (isLoading) return <Spinner />;\n *\n *   return messages.map((msg) => (\n *     <div key={msg.id}>\n *       <h3>{msg.title}</h3>\n *       <p>{msg.body}</p>\n *       {msg.actionButton && (\n *         <a href={msg.actionButton.url}>{msg.actionButton.text}</a>\n *       )}\n *       <button onClick={() => markViewed(msg.id)}>\n *         Dismiss\n *       </button>\n *     </div>\n *   ));\n * }\n * ```\n */\nexport function useMessages(options?: UseMessagesOptions): UseMessagesResult {\n  const messaging = useMessagingContext();\n  const [messages, setMessages] = useState<InAppMessage[]>([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const enabled = options?.enabled ?? true;\n  const pollInterval = options?.pollInterval;\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  const fetchMessages = useCallback(async () => {\n    try {\n      const msgs = await messaging.getMessages(optionsRef.current);\n      setMessages(msgs);\n      setError(null);\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error(String(err)));\n    }\n  }, [messaging]);\n\n  useEffect(() => {\n    if (!enabled) {\n      setIsLoading(false);\n      return;\n    }\n\n    let active = true;\n\n    messaging\n      .getMessages(optionsRef.current)\n      .then((msgs) => {\n        if (active) {\n          setMessages(msgs);\n          setIsLoading(false);\n        }\n      })\n      .catch((err) => {\n        if (active) {\n          setError(err instanceof Error ? err : new Error(String(err)));\n          setIsLoading(false);\n        }\n      });\n\n    let tid: ReturnType<typeof setInterval> | undefined;\n    if (pollInterval && pollInterval > 0) {\n      tid = setInterval(() => {\n        if (active) fetchMessages();\n      }, pollInterval);\n    }\n\n    return () => {\n      active = false;\n      if (tid) clearInterval(tid);\n    };\n  }, [enabled, pollInterval, fetchMessages, messaging]);\n\n  const markViewed = useCallback(\n    async (messageId: string) => {\n      setMessages((prev) => prev.filter((m) => m.id !== messageId));\n      await messaging.markViewed(messageId);\n    },\n    [messaging],\n  );\n\n  return { messages, isLoading, error, markViewed, refresh: fetchMessages };\n}\n\n/**\n * Hook to lazily fetch in-app messages on demand.\n *\n * @example\n * ```tsx\n * function InboxButton() {\n *   const { fetch, messages, isLoading } = useLazyMessages();\n *\n *   return (\n *     <>\n *       <button onClick={() => fetch()}>\n *         Check Messages\n *       </button>\n *       {messages.map((msg) => <div key={msg.id}>{msg.title}</div>)}\n *     </>\n *   );\n * }\n * ```\n */\nexport function useLazyMessages(): {\n  fetch: (options?: GetMessagesOptions) => Promise<InAppMessage[] | undefined>;\n  messages: InAppMessage[];\n  isLoading: boolean;\n  error: Error | null;\n  markViewed: (messageId: string) => Promise<void>;\n  reset: () => void;\n} {\n  const messaging = useMessagingContext();\n  const [messages, setMessages] = useState<InAppMessage[]>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  const fetchMessages = useCallback(\n    async (options?: GetMessagesOptions) => {\n      setIsLoading(true);\n      setError(null);\n      try {\n        const msgs = await messaging.getMessages(options);\n        setMessages(msgs);\n        return msgs;\n      } catch (err) {\n        setError(err instanceof Error ? err : new Error(String(err)));\n        return undefined;\n      } finally {\n        setIsLoading(false);\n      }\n    },\n    [messaging],\n  );\n\n  const markViewed = useCallback(\n    async (messageId: string) => {\n      setMessages((prev) => prev.filter((m) => m.id !== messageId));\n      await messaging.markViewed(messageId);\n    },\n    [messaging],\n  );\n\n  const reset = useCallback(() => {\n    setMessages([]);\n    setError(null);\n  }, []);\n\n  return { fetch: fetchMessages, messages, isLoading, error, markViewed, reset };\n}\n"],"mappings":"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","names":["import_react","import_react"]}

package/dist/index.d.cts

@@ -0,0 +1,137 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { MessagingConfig, Messaging, GetMessagesOptions, InAppMessage } from '@kitbase/messaging';
+export { GetMessagesOptions, InAppMessage, MessageButton, MessageType, MessagingConfig } from '@kitbase/messaging';
+
+interface MessagingProviderProps {
+    /** Messaging SDK configuration */
+    config: MessagingConfig;
+    children: ReactNode;
+}
+/**
+ * Provider for in-app messaging.
+ *
+ * By default, messages are fetched and rendered automatically.
+ * Pass `autoShow: false` in config to use data-only hooks instead.
+ *
+ * @example Auto-render (default)
+ * ```tsx
+ * <MessagingProvider config={{ sdkKey: 'your-key', userId: user.id }}>
+ *   <App />
+ * </MessagingProvider>
+ * // Messages appear automatically — no extra code needed!
+ * ```
+ *
+ * @example Data-only (custom rendering)
+ * ```tsx
+ * <MessagingProvider config={{ sdkKey: 'your-key', autoShow: false }}>
+ *   <App />
+ * </MessagingProvider>
+ * // Then use useMessages() hook to render your own UI
+ * ```
+ */
+declare function MessagingProvider({ config, children }: MessagingProviderProps): react_jsx_runtime.JSX.Element;
+
+declare function useMessagingContext(): Messaging;
+
+/**
+ * Options for the useMessages hook
+ */
+interface UseMessagesOptions extends GetMessagesOptions {
+    /**
+     * Whether to fetch on mount.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Polling interval in milliseconds.
+     * Set to 0 or omit to disable polling.
+     */
+    pollInterval?: number;
+}
+/**
+ * State for async operations
+ */
+interface AsyncState<T> {
+    data: T;
+    isLoading: boolean;
+    error: Error | null;
+}
+
+interface UseMessagesResult {
+    /** Active in-app messages */
+    messages: InAppMessage[];
+    /** Whether the initial fetch is in progress */
+    isLoading: boolean;
+    /** Error from the most recent fetch */
+    error: Error | null;
+    /**
+     * Mark a message as viewed. Removes it from the UI immediately
+     * and records the view on the server.
+     * Requires `identify()` to have been called on the messaging instance.
+     */
+    markViewed: (messageId: string) => Promise<void>;
+    /** Manually re-fetch messages */
+    refresh: () => Promise<void>;
+}
+/**
+ * Hook to fetch in-app messages (data-only, for custom rendering).
+ *
+ * Use this with `autoShow: false` on the provider to build your own
+ * message UI. For automatic rendering, just use the default provider
+ * config and skip this hook.
+ *
+ * @example
+ * ```tsx
+ * function MessageList() {
+ *   const { messages, markViewed, isLoading } = useMessages({
+ *     pollInterval: 60_000,
+ *   });
+ *
+ *   if (isLoading) return <Spinner />;
+ *
+ *   return messages.map((msg) => (
+ *     <div key={msg.id}>
+ *       <h3>{msg.title}</h3>
+ *       <p>{msg.body}</p>
+ *       {msg.actionButton && (
+ *         <a href={msg.actionButton.url}>{msg.actionButton.text}</a>
+ *       )}
+ *       <button onClick={() => markViewed(msg.id)}>
+ *         Dismiss
+ *       </button>
+ *     </div>
+ *   ));
+ * }
+ * ```
+ */
+declare function useMessages(options?: UseMessagesOptions): UseMessagesResult;
+/**
+ * Hook to lazily fetch in-app messages on demand.
+ *
+ * @example
+ * ```tsx
+ * function InboxButton() {
+ *   const { fetch, messages, isLoading } = useLazyMessages();
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => fetch()}>
+ *         Check Messages
+ *       </button>
+ *       {messages.map((msg) => <div key={msg.id}>{msg.title}</div>)}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function useLazyMessages(): {
+    fetch: (options?: GetMessagesOptions) => Promise<InAppMessage[] | undefined>;
+    messages: InAppMessage[];
+    isLoading: boolean;
+    error: Error | null;
+    markViewed: (messageId: string) => Promise<void>;
+    reset: () => void;
+};
+
+export { type AsyncState, MessagingProvider, type MessagingProviderProps, type UseMessagesOptions, type UseMessagesResult, useLazyMessages, useMessages, useMessagingContext };

package/dist/index.d.ts

@@ -0,0 +1,137 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { MessagingConfig, Messaging, GetMessagesOptions, InAppMessage } from '@kitbase/messaging';
+export { GetMessagesOptions, InAppMessage, MessageButton, MessageType, MessagingConfig } from '@kitbase/messaging';
+
+interface MessagingProviderProps {
+    /** Messaging SDK configuration */
+    config: MessagingConfig;
+    children: ReactNode;
+}
+/**
+ * Provider for in-app messaging.
+ *
+ * By default, messages are fetched and rendered automatically.
+ * Pass `autoShow: false` in config to use data-only hooks instead.
+ *
+ * @example Auto-render (default)
+ * ```tsx
+ * <MessagingProvider config={{ sdkKey: 'your-key', userId: user.id }}>
+ *   <App />
+ * </MessagingProvider>
+ * // Messages appear automatically — no extra code needed!
+ * ```
+ *
+ * @example Data-only (custom rendering)
+ * ```tsx
+ * <MessagingProvider config={{ sdkKey: 'your-key', autoShow: false }}>
+ *   <App />
+ * </MessagingProvider>
+ * // Then use useMessages() hook to render your own UI
+ * ```
+ */
+declare function MessagingProvider({ config, children }: MessagingProviderProps): react_jsx_runtime.JSX.Element;
+
+declare function useMessagingContext(): Messaging;
+
+/**
+ * Options for the useMessages hook
+ */
+interface UseMessagesOptions extends GetMessagesOptions {
+    /**
+     * Whether to fetch on mount.
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Polling interval in milliseconds.
+     * Set to 0 or omit to disable polling.
+     */
+    pollInterval?: number;
+}
+/**
+ * State for async operations
+ */
+interface AsyncState<T> {
+    data: T;
+    isLoading: boolean;
+    error: Error | null;
+}
+
+interface UseMessagesResult {
+    /** Active in-app messages */
+    messages: InAppMessage[];
+    /** Whether the initial fetch is in progress */
+    isLoading: boolean;
+    /** Error from the most recent fetch */
+    error: Error | null;
+    /**
+     * Mark a message as viewed. Removes it from the UI immediately
+     * and records the view on the server.
+     * Requires `identify()` to have been called on the messaging instance.
+     */
+    markViewed: (messageId: string) => Promise<void>;
+    /** Manually re-fetch messages */
+    refresh: () => Promise<void>;
+}
+/**
+ * Hook to fetch in-app messages (data-only, for custom rendering).
+ *
+ * Use this with `autoShow: false` on the provider to build your own
+ * message UI. For automatic rendering, just use the default provider
+ * config and skip this hook.
+ *
+ * @example
+ * ```tsx
+ * function MessageList() {
+ *   const { messages, markViewed, isLoading } = useMessages({
+ *     pollInterval: 60_000,
+ *   });
+ *
+ *   if (isLoading) return <Spinner />;
+ *
+ *   return messages.map((msg) => (
+ *     <div key={msg.id}>
+ *       <h3>{msg.title}</h3>
+ *       <p>{msg.body}</p>
+ *       {msg.actionButton && (
+ *         <a href={msg.actionButton.url}>{msg.actionButton.text}</a>
+ *       )}
+ *       <button onClick={() => markViewed(msg.id)}>
+ *         Dismiss
+ *       </button>
+ *     </div>
+ *   ));
+ * }
+ * ```
+ */
+declare function useMessages(options?: UseMessagesOptions): UseMessagesResult;
+/**
+ * Hook to lazily fetch in-app messages on demand.
+ *
+ * @example
+ * ```tsx
+ * function InboxButton() {
+ *   const { fetch, messages, isLoading } = useLazyMessages();
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => fetch()}>
+ *         Check Messages
+ *       </button>
+ *       {messages.map((msg) => <div key={msg.id}>{msg.title}</div>)}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function useLazyMessages(): {
+    fetch: (options?: GetMessagesOptions) => Promise<InAppMessage[] | undefined>;
+    messages: InAppMessage[];
+    isLoading: boolean;
+    error: Error | null;
+    markViewed: (messageId: string) => Promise<void>;
+    reset: () => void;
+};
+
+export { type AsyncState, MessagingProvider, type MessagingProviderProps, type UseMessagesOptions, type UseMessagesResult, useLazyMessages, useMessages, useMessagingContext };

package/dist/index.js

@@ -0,0 +1,135 @@
+// src/provider.tsx
+import { useMemo, useEffect, useRef } from "react";
+import { Messaging } from "@kitbase/messaging";
+
+// src/context.ts
+import { createContext, useContext } from "react";
+var MessagingContext = createContext(null);
+function useMessagingContext() {
+  const context = useContext(MessagingContext);
+  if (!context) {
+    throw new Error(
+      'useMessagingContext must be used within a MessagingProvider. Wrap your component with <MessagingProvider config={{ sdkKey: "..." }}>'
+    );
+  }
+  return context;
+}
+
+// src/provider.tsx
+import { jsx } from "react/jsx-runtime";
+function MessagingProvider({ config, children }) {
+  const configRef = useRef(config);
+  configRef.current = config;
+  const client = useMemo(
+    () => new Messaging(config),
+    // Recreate when sdkKey changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [config.sdkKey]
+  );
+  useEffect(() => {
+    return () => {
+      client.close();
+    };
+  }, [client]);
+  return /* @__PURE__ */ jsx(MessagingContext.Provider, { value: client, children });
+}
+
+// src/use-messages.ts
+import { useState, useEffect as useEffect2, useCallback, useRef as useRef2 } from "react";
+function useMessages(options) {
+  const messaging = useMessagingContext();
+  const [messages, setMessages] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const enabled = options?.enabled ?? true;
+  const pollInterval = options?.pollInterval;
+  const optionsRef = useRef2(options);
+  optionsRef.current = options;
+  const fetchMessages = useCallback(async () => {
+    try {
+      const msgs = await messaging.getMessages(optionsRef.current);
+      setMessages(msgs);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error(String(err)));
+    }
+  }, [messaging]);
+  useEffect2(() => {
+    if (!enabled) {
+      setIsLoading(false);
+      return;
+    }
+    let active = true;
+    messaging.getMessages(optionsRef.current).then((msgs) => {
+      if (active) {
+        setMessages(msgs);
+        setIsLoading(false);
+      }
+    }).catch((err) => {
+      if (active) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      }
+    });
+    let tid;
+    if (pollInterval && pollInterval > 0) {
+      tid = setInterval(() => {
+        if (active) fetchMessages();
+      }, pollInterval);
+    }
+    return () => {
+      active = false;
+      if (tid) clearInterval(tid);
+    };
+  }, [enabled, pollInterval, fetchMessages, messaging]);
+  const markViewed = useCallback(
+    async (messageId) => {
+      setMessages((prev) => prev.filter((m) => m.id !== messageId));
+      await messaging.markViewed(messageId);
+    },
+    [messaging]
+  );
+  return { messages, isLoading, error, markViewed, refresh: fetchMessages };
+}
+function useLazyMessages() {
+  const messaging = useMessagingContext();
+  const [messages, setMessages] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fetchMessages = useCallback(
+    async (options) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const msgs = await messaging.getMessages(options);
+        setMessages(msgs);
+        return msgs;
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        return void 0;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [messaging]
+  );
+  const markViewed = useCallback(
+    async (messageId) => {
+      setMessages((prev) => prev.filter((m) => m.id !== messageId));
+      await messaging.markViewed(messageId);
+    },
+    [messaging]
+  );
+  const reset = useCallback(() => {
+    setMessages([]);
+    setError(null);
+  }, []);
+  return { fetch: fetchMessages, messages, isLoading, error, markViewed, reset };
+}
+export {
+  MessagingProvider,
+  useLazyMessages,
+  useMessages,
+  useMessagingContext
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider.tsx","../src/context.ts","../src/use-messages.ts"],"sourcesContent":["import { useMemo, useEffect, useRef, type ReactNode } from 'react';\nimport { Messaging, type MessagingConfig } from '@kitbase/messaging';\nimport { MessagingContext } from './context.js';\n\nexport interface MessagingProviderProps {\n  /** Messaging SDK configuration */\n  config: MessagingConfig;\n  children: ReactNode;\n}\n\n/**\n * Provider for in-app messaging.\n *\n * By default, messages are fetched and rendered automatically.\n * Pass `autoShow: false` in config to use data-only hooks instead.\n *\n * @example Auto-render (default)\n * ```tsx\n * <MessagingProvider config={{ sdkKey: 'your-key', userId: user.id }}>\n *   <App />\n * </MessagingProvider>\n * // Messages appear automatically — no extra code needed!\n * ```\n *\n * @example Data-only (custom rendering)\n * ```tsx\n * <MessagingProvider config={{ sdkKey: 'your-key', autoShow: false }}>\n *   <App />\n * </MessagingProvider>\n * // Then use useMessages() hook to render your own UI\n * ```\n */\nexport function MessagingProvider({ config, children }: MessagingProviderProps) {\n  const configRef = useRef(config);\n  configRef.current = config;\n\n  const client = useMemo(\n    () => new Messaging(config),\n    // Recreate when sdkKey changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [config.sdkKey],\n  );\n\n  useEffect(() => {\n    return () => {\n      client.close();\n    };\n  }, [client]);\n\n  return (\n    <MessagingContext.Provider value={client}>\n      {children}\n    </MessagingContext.Provider>\n  );\n}\n","import { createContext, useContext } from 'react';\nimport type { Messaging } from '@kitbase/messaging';\n\nexport const MessagingContext = createContext<Messaging | null>(null);\n\nexport function useMessagingContext(): Messaging {\n  const context = useContext(MessagingContext);\n\n  if (!context) {\n    throw new Error(\n      'useMessagingContext must be used within a MessagingProvider. ' +\n        'Wrap your component with <MessagingProvider config={{ sdkKey: \"...\" }}>',\n    );\n  }\n\n  return context;\n}\n","import { useState, useEffect, useCallback, useRef } from 'react';\nimport type { InAppMessage, GetMessagesOptions } from '@kitbase/messaging';\nimport { useMessagingContext } from './context.js';\nimport type { UseMessagesOptions } from './types.js';\n\nexport interface UseMessagesResult {\n  /** Active in-app messages */\n  messages: InAppMessage[];\n  /** Whether the initial fetch is in progress */\n  isLoading: boolean;\n  /** Error from the most recent fetch */\n  error: Error | null;\n  /**\n   * Mark a message as viewed. Removes it from the UI immediately\n   * and records the view on the server.\n   * Requires `identify()` to have been called on the messaging instance.\n   */\n  markViewed: (messageId: string) => Promise<void>;\n  /** Manually re-fetch messages */\n  refresh: () => Promise<void>;\n}\n\n/**\n * Hook to fetch in-app messages (data-only, for custom rendering).\n *\n * Use this with `autoShow: false` on the provider to build your own\n * message UI. For automatic rendering, just use the default provider\n * config and skip this hook.\n *\n * @example\n * ```tsx\n * function MessageList() {\n *   const { messages, markViewed, isLoading } = useMessages({\n *     pollInterval: 60_000,\n *   });\n *\n *   if (isLoading) return <Spinner />;\n *\n *   return messages.map((msg) => (\n *     <div key={msg.id}>\n *       <h3>{msg.title}</h3>\n *       <p>{msg.body}</p>\n *       {msg.actionButton && (\n *         <a href={msg.actionButton.url}>{msg.actionButton.text}</a>\n *       )}\n *       <button onClick={() => markViewed(msg.id)}>\n *         Dismiss\n *       </button>\n *     </div>\n *   ));\n * }\n * ```\n */\nexport function useMessages(options?: UseMessagesOptions): UseMessagesResult {\n  const messaging = useMessagingContext();\n  const [messages, setMessages] = useState<InAppMessage[]>([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const enabled = options?.enabled ?? true;\n  const pollInterval = options?.pollInterval;\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n\n  const fetchMessages = useCallback(async () => {\n    try {\n      const msgs = await messaging.getMessages(optionsRef.current);\n      setMessages(msgs);\n      setError(null);\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error(String(err)));\n    }\n  }, [messaging]);\n\n  useEffect(() => {\n    if (!enabled) {\n      setIsLoading(false);\n      return;\n    }\n\n    let active = true;\n\n    messaging\n      .getMessages(optionsRef.current)\n      .then((msgs) => {\n        if (active) {\n          setMessages(msgs);\n          setIsLoading(false);\n        }\n      })\n      .catch((err) => {\n        if (active) {\n          setError(err instanceof Error ? err : new Error(String(err)));\n          setIsLoading(false);\n        }\n      });\n\n    let tid: ReturnType<typeof setInterval> | undefined;\n    if (pollInterval && pollInterval > 0) {\n      tid = setInterval(() => {\n        if (active) fetchMessages();\n      }, pollInterval);\n    }\n\n    return () => {\n      active = false;\n      if (tid) clearInterval(tid);\n    };\n  }, [enabled, pollInterval, fetchMessages, messaging]);\n\n  const markViewed = useCallback(\n    async (messageId: string) => {\n      setMessages((prev) => prev.filter((m) => m.id !== messageId));\n      await messaging.markViewed(messageId);\n    },\n    [messaging],\n  );\n\n  return { messages, isLoading, error, markViewed, refresh: fetchMessages };\n}\n\n/**\n * Hook to lazily fetch in-app messages on demand.\n *\n * @example\n * ```tsx\n * function InboxButton() {\n *   const { fetch, messages, isLoading } = useLazyMessages();\n *\n *   return (\n *     <>\n *       <button onClick={() => fetch()}>\n *         Check Messages\n *       </button>\n *       {messages.map((msg) => <div key={msg.id}>{msg.title}</div>)}\n *     </>\n *   );\n * }\n * ```\n */\nexport function useLazyMessages(): {\n  fetch: (options?: GetMessagesOptions) => Promise<InAppMessage[] | undefined>;\n  messages: InAppMessage[];\n  isLoading: boolean;\n  error: Error | null;\n  markViewed: (messageId: string) => Promise<void>;\n  reset: () => void;\n} {\n  const messaging = useMessagingContext();\n  const [messages, setMessages] = useState<InAppMessage[]>([]);\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<Error | null>(null);\n\n  const fetchMessages = useCallback(\n    async (options?: GetMessagesOptions) => {\n      setIsLoading(true);\n      setError(null);\n      try {\n        const msgs = await messaging.getMessages(options);\n        setMessages(msgs);\n        return msgs;\n      } catch (err) {\n        setError(err instanceof Error ? err : new Error(String(err)));\n        return undefined;\n      } finally {\n        setIsLoading(false);\n      }\n    },\n    [messaging],\n  );\n\n  const markViewed = useCallback(\n    async (messageId: string) => {\n      setMessages((prev) => prev.filter((m) => m.id !== messageId));\n      await messaging.markViewed(messageId);\n    },\n    [messaging],\n  );\n\n  const reset = useCallback(() => {\n    setMessages([]);\n    setError(null);\n  }, []);\n\n  return { fetch: fetchMessages, messages, isLoading, error, markViewed, reset };\n}\n"],"mappings":"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","names":["useEffect","useRef","useRef","useEffect"]}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@kitbase/messaging-react",
+  "version": "0.1.0",
+  "description": "Kitbase In-App Messaging React SDK - React hooks and providers",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "kitbase",
+    "messaging",
+    "in-app-messages",
+    "react",
+    "hooks"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scr2em/kitbase-sdk.git",
+    "directory": "messaging/react"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "dependencies": {
+    "@kitbase/messaging": "0.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.1.2",
+    "@types/react": "^18.2.48",
+    "jsdom": "^23.2.0",
+    "react": "^18.2.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "clean": "rm -rf dist"
+  }
+}