@malto/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Malto.io
+
+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

@@ -0,0 +1,15 @@
+# @malto/react
+
+React / Next.js wrapper for the [Malto](https://malto.io) feedback widget.
+
+```bash
+npm install @malto/react
+```
+
+```tsx
+import { MaltoFeedback } from "@malto/react";
+
+<MaltoFeedback apiKey="pk_live_xxx" mode="bubble" />
+```
+
+For full docs see the [monorepo README](https://github.com/malto-io/malto-sdk).

package/dist/index.cjs

@@ -0,0 +1,86 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var sdk = require('@malto/sdk');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/index.tsx
+function MaltoFeedback(props) {
+  const containerRef = react.useRef(null);
+  const widgetRef = react.useRef(null);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const config = {
+      ...props,
+      target: props.mode === "inline" || props.mode === "trigger" ? containerRef.current ?? void 0 : void 0
+    };
+    const widget = new sdk.MaltoWidget(config);
+    widgetRef.current = widget;
+    void widget.mount();
+    return () => {
+      widget.unmount();
+      widgetRef.current = null;
+    };
+  }, [
+    props.apiKey,
+    props.apiUrl,
+    props.mode,
+    props.position,
+    props.primaryColor,
+    props.triggerLabel,
+    props.identify?.externalUserId,
+    props.identify?.email,
+    props.identify?.hash
+  ]);
+  if (props.mode === "inline" || props.mode === "trigger") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: props.className });
+  }
+  return null;
+}
+function useMalto() {
+  return {
+    open: () => widgetRefSingleton?.open(),
+    close: () => widgetRefSingleton?.close()
+  };
+}
+var widgetRefSingleton = null;
+
+Object.defineProperty(exports, "MaltoApiError", {
+  enumerable: true,
+  get: function () { return sdk.MaltoApiError; }
+});
+Object.defineProperty(exports, "MaltoClient", {
+  enumerable: true,
+  get: function () { return sdk.MaltoClient; }
+});
+Object.defineProperty(exports, "MaltoWidget", {
+  enumerable: true,
+  get: function () { return sdk.MaltoWidget; }
+});
+Object.defineProperty(exports, "close", {
+  enumerable: true,
+  get: function () { return sdk.close; }
+});
+Object.defineProperty(exports, "destroy", {
+  enumerable: true,
+  get: function () { return sdk.destroy; }
+});
+Object.defineProperty(exports, "identify", {
+  enumerable: true,
+  get: function () { return sdk.identify; }
+});
+Object.defineProperty(exports, "init", {
+  enumerable: true,
+  get: function () { return sdk.init; }
+});
+Object.defineProperty(exports, "open", {
+  enumerable: true,
+  get: function () { return sdk.open; }
+});
+Object.defineProperty(exports, "reset", {
+  enumerable: true,
+  get: function () { return sdk.reset; }
+});
+exports.MaltoFeedback = MaltoFeedback;
+exports.useMalto = useMalto;

package/dist/index.d.cts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MaltoConfig } from '@malto/sdk';
+export { BoardInfo, CommentItem, FeedbackItem, IdentifyPayload, MaltoApiError, MaltoClient, MaltoConfig, MaltoWidget, ReleaseItem, SdkFeature, SdkMode, SdkPosition, SessionResponse, WidgetSettings, close, destroy, identify, init, open, reset } from '@malto/sdk';
+
+type MaltoWidgetProps = Omit<MaltoConfig, "target"> & {
+    className?: string;
+};
+declare function MaltoFeedback(props: MaltoWidgetProps): react_jsx_runtime.JSX.Element | null;
+declare function useMalto(): {
+    open: () => void | undefined;
+    close: () => void | undefined;
+};
+
+export { MaltoFeedback, type MaltoWidgetProps, useMalto };

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { MaltoConfig } from '@malto/sdk';
+export { BoardInfo, CommentItem, FeedbackItem, IdentifyPayload, MaltoApiError, MaltoClient, MaltoConfig, MaltoWidget, ReleaseItem, SdkFeature, SdkMode, SdkPosition, SessionResponse, WidgetSettings, close, destroy, identify, init, open, reset } from '@malto/sdk';
+
+type MaltoWidgetProps = Omit<MaltoConfig, "target"> & {
+    className?: string;
+};
+declare function MaltoFeedback(props: MaltoWidgetProps): react_jsx_runtime.JSX.Element | null;
+declare function useMalto(): {
+    open: () => void | undefined;
+    close: () => void | undefined;
+};
+
+export { MaltoFeedback, type MaltoWidgetProps, useMalto };

package/dist/index.js

@@ -0,0 +1,48 @@
+"use client";
+import { useRef, useEffect } from 'react';
+import { MaltoWidget } from '@malto/sdk';
+export { MaltoApiError, MaltoClient, MaltoWidget, close, destroy, identify, init, open, reset } from '@malto/sdk';
+import { jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+function MaltoFeedback(props) {
+  const containerRef = useRef(null);
+  const widgetRef = useRef(null);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const config = {
+      ...props,
+      target: props.mode === "inline" || props.mode === "trigger" ? containerRef.current ?? void 0 : void 0
+    };
+    const widget = new MaltoWidget(config);
+    widgetRef.current = widget;
+    void widget.mount();
+    return () => {
+      widget.unmount();
+      widgetRef.current = null;
+    };
+  }, [
+    props.apiKey,
+    props.apiUrl,
+    props.mode,
+    props.position,
+    props.primaryColor,
+    props.triggerLabel,
+    props.identify?.externalUserId,
+    props.identify?.email,
+    props.identify?.hash
+  ]);
+  if (props.mode === "inline" || props.mode === "trigger") {
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, className: props.className });
+  }
+  return null;
+}
+function useMalto() {
+  return {
+    open: () => widgetRefSingleton?.open(),
+    close: () => widgetRefSingleton?.close()
+  };
+}
+var widgetRefSingleton = null;
+
+export { MaltoFeedback, useMalto };

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@malto/react",
+  "version": "0.1.0",
+  "description": "React / Next.js wrapper for the Malto.io feedback widget.",
+  "license": "MIT",
+  "homepage": "https://github.com/malto-io/malto-sdk",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/malto-io/malto-sdk.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/malto-io/malto-sdk/issues"
+  },
+  "author": "Malto.io <hello@malto.io>",
+  "keywords": [
+    "malto",
+    "feedback",
+    "react",
+    "nextjs",
+    "widget",
+    "sdk"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public",
+    "provenance": false
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "react": ">=17 <20",
+    "react-dom": ">=17 <20"
+  },
+  "dependencies": {
+    "@malto/sdk": "^0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.7.3"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}