@zean-chat/react 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Zean
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,31 @@
-# Temporary Holding Version
+# @zean-chat/react: live chat widget for React and Next.js
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Add a free customer support chat to your React app with one component and a hook, with [Zean](https://zean.chat/?utm_source=npm&utm_medium=readme&utm_campaign=react). Works with Next.js, React Router and TanStack Start. Your App key is in your Zean dashboard.
+
+```bash
+npm install @zean-chat/react
+```
+
+```tsx
+import { ZeanChat, useZean } from "@zean-chat/react";
+
+// Once, in the root layout or root route.
+<ZeanChat appKey="app_your_app_key" getToken={user ? fetchZeanToken : undefined} attributes={{ plan: "pro" }} />;
+
+// Anywhere.
+const { open, close, toggle, unreadCount, identify, signOut, setAttributes } = useZean();
+```
+
+To switch people, render one time without `getToken` in between. Full guide: [install the chat in React and Next.js](https://zean.chat/docs/install-react), [React reference](https://zean.chat/docs/reference-react).
+
+## Why Zean
+
+- Free plan to start. Paid plans in FCFA, payable by Mobile Money.
+- Shared inbox for your team. Reply from your phone.
+- Verified identity, webhooks, French and English. Fast even on 3G.
+
+## Links
+
+[Zean live chat](https://zean.chat/?utm_source=npm&utm_medium=readme&utm_campaign=react) · [Documentation](https://zean.chat/docs) · [Create a free account](https://zean.chat/sign-in?utm_source=npm&utm_medium=readme&utm_campaign=react) · [Zean vs Intercom](https://zean.chat/compare/intercom) · [Zean vs Crisp](https://zean.chat/compare/crisp)
+
+Other SDKs: [@zean-chat/js](https://www.npmjs.com/package/@zean-chat/js) · [@zean-chat/react](https://www.npmjs.com/package/@zean-chat/react) · [@zean-chat/vue](https://www.npmjs.com/package/@zean-chat/vue) · [@zean-chat/react-native](https://www.npmjs.com/package/@zean-chat/react-native)

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import type { ZeanChatProps, ZeanControls } from './interfaces.js';
+export type { ZeanAttributes, ZeanLocale, ZeanTokenSource } from '@zean-chat/js';
+export type { ZeanChatProps, ZeanControls } from './interfaces.js';
+/**
+ * Shows the chat. Render it once, near the root, on every page. It renders nothing itself: the chat sits in its own
+ * frame, and stays across page changes.
+ */
+export declare function ZeanChat({ appKey, getToken, attributes, locale, loaderUrl }: ZeanChatProps): null;
+/** Opens and closes the chat, and follows the unread count. Works in any component, before the chat has loaded. */
+export declare function useZean(): ZeanControls;

package/dist/index.js

@@ -0,0 +1,44 @@
+"use client";
+
+// src/index.ts
+import { useEffect, useRef, useSyncExternalStore } from "react";
+import { loadZean, zean } from "@zean-chat/js";
+function ZeanChat({ appKey, getToken, attributes, locale, loaderUrl }) {
+  const latestToken = useRef(getToken);
+  const tokenSource = useRef(() => latestToken.current?.() ?? Promise.resolve(null));
+  const identified = useRef(false);
+  const signedIn = Boolean(getToken);
+  const attributesKey = attributes ? JSON.stringify(attributes) : null;
+  useEffect(() => {
+    latestToken.current = getToken;
+  });
+  useEffect(() => {
+    loadZean({ appKey, locale, loaderUrl });
+  }, [appKey, locale, loaderUrl]);
+  useEffect(() => {
+    if (signedIn && !identified.current) zean.identify(tokenSource.current);
+    else if (!signedIn && identified.current) zean.signOut();
+    identified.current = signedIn;
+  }, [signedIn]);
+  useEffect(() => {
+    if (attributesKey) zean.setAttributes(JSON.parse(attributesKey));
+  }, [attributesKey]);
+  return null;
+}
+var serverUnreadCount = () => 0;
+function useZean() {
+  const unreadCount = useSyncExternalStore(zean.onUnreadChange, zean.getUnreadCount, serverUnreadCount);
+  return {
+    open: zean.open,
+    close: zean.close,
+    toggle: zean.toggle,
+    identify: zean.identify,
+    signOut: zean.signOut,
+    setAttributes: zean.setAttributes,
+    unreadCount
+  };
+}
+export {
+  ZeanChat,
+  useZean
+};

package/dist/interfaces.d.ts

@@ -0,0 +1,14 @@
+import type { ZeanApi, ZeanAttributes, ZeanOptions } from '@zean-chat/js';
+export interface ZeanChatProps extends ZeanOptions {
+    /**
+     * While a person is signed in: returns a token your server signed. Leave it out when no one is; to switch people,
+     * leave it out once in between.
+     */
+    getToken?: ZeanOptions['getToken'];
+    /** What the page knows about the person, shown on the Contact's profile. */
+    attributes?: ZeanAttributes;
+}
+/** The chat's methods, and the count of replies the Contact has not seen. */
+export interface ZeanControls extends Omit<ZeanApi, 'getUnreadCount' | 'onUnreadChange'> {
+    unreadCount: number;
+}

package/package.json

@@ -1,6 +1,68 @@
 {
-  "name": "@zean-chat/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@zean-chat/react",
+	"version": "0.1.0",
+	"description": "Live chat widget for React and Next.js: add a free customer support chat to your app with one component and a hook. Intercom and Crisp alternative.",
+	"keywords": [
+		"react",
+		"nextjs",
+		"next.js",
+		"react-router",
+		"tanstack-start",
+		"react-component",
+		"react-hooks",
+		"typescript",
+		"live-chat",
+		"chat-widget",
+		"support-chat",
+		"customer-support",
+		"customer-service",
+		"helpdesk",
+		"help-desk",
+		"in-app-chat",
+		"chat",
+		"messaging",
+		"zean",
+		"intercom-alternative",
+		"crisp-alternative",
+		"tawk-to-alternative",
+		"zendesk-alternative"
+	],
+	"homepage": "https://zean.chat/docs/install-react",
+	"bugs": {
+		"url": "https://zean.chat/contact"
+	},
+	"author": "Zean (https://zean.chat)",
+	"license": "MIT",
+	"type": "module",
+	"sideEffects": false,
+	"exports": {
+		".": {
+			"zean-source": "./src/index.ts",
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"scripts": {
+		"prepublishOnly": "npm run build",
+		"build": "node ../../scripts/build-sdk.mjs",
+		"check-types": "tsc --noEmit"
+	},
+	"dependencies": {
+		"@zean-chat/js": "^0.1.0"
+	},
+	"peerDependencies": {
+		"react": ">=18"
+	},
+	"devDependencies": {
+		"@types/react": "19.2.14",
+		"@zean/config": "*",
+		"react": "19.2.5",
+		"typescript": "6.0.3"
+	}
+}