@enquio/react-popup 1.0.1

package/README.md

@@ -0,0 +1,96 @@
+# @enquio/react
+
+React wrapper component for the Enquio popup Web Component. Provides a React-idiomatic interface to integrate Enquio popups into your React applications.
+
+## 📦 Installation
+
+```bash
+npm install @enquio/react
+```
+
+## ✅ Requirements
+
+- **React**: >=17
+- **React-DOM**: >=17
+
+## 🚀 Quick Start
+
+### Basic Usage
+
+```typescript
+import { EnquioPopup } from '@enquio/react';
+
+export default function App() {
+  return (
+    <div>
+      <h1>My App</h1>
+      <EnquioPopup projectId="your-project-id" />
+    </div>
+  );
+}
+```
+
+## 📖 API
+
+### `EnquioPopup`
+
+A React component that renders the Enquio popup Web Component.
+
+#### Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `projectId` | `string` | Yes | Your Enquio project ID |
+
+#### Example
+
+```typescript
+<EnquioPopup projectId="abc-123-def-456" />
+```
+
+## 🔧 Advanced Usage
+
+### Using Refs
+
+You can access the underlying DOM element using React refs:
+
+```typescript
+import { useRef, useEffect } from 'react';
+import { EnquioPopup } from '@enquio/react';
+
+export default function App() {
+  const popupRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    // Access custom element directly if needed
+    if (popupRef.current) {
+      console.log('Popup ready:', popupRef.current);
+    }
+  }, []);
+
+  return <enquio-popup ref={popupRef} project-id="your-project-id" />;
+}
+```
+
+### With TypeScript
+
+The component is fully typed:
+
+```typescript
+import { EnquioPopup } from '@enquio/react';
+import type { ReactElement } from 'react';
+
+export default function App(): ReactElement {
+  return <EnquioPopup projectId="your-project-id" />;
+}
+```
+
+## 🔗 Dependencies
+
+- `@enquio/core`: Core script loader
+- `react`: Peer dependency (must be installed separately)
+- `react-dom`: Peer dependency (must be installed separately)
+
+## 📝 License
+
+MIT © Enquio Team

package/dist/index.d.mts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+
+declare function EnquioPopup({ projectId }: {
+    projectId: string;
+}): ReactElement;
+
+export { EnquioPopup };

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+
+declare function EnquioPopup({ projectId }: {
+    projectId: string;
+}): ReactElement;
+
+export { EnquioPopup };

package/dist/index.js

@@ -0,0 +1,40 @@
+"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, {
+  EnquioPopup: () => EnquioPopup
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/EnquioPopup.tsx
+var import_react = require("react");
+var import_popup_core = require("@enquio/popup-core");
+var import_jsx_runtime = require("react/jsx-runtime");
+function EnquioPopup({ projectId }) {
+  (0, import_react.useEffect)(() => {
+    (0, import_popup_core.loadEnquioScript)().then(() => customElements.whenDefined("enquio-popup")).catch(console.error);
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("enquio-popup", { "project-id": projectId });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  EnquioPopup
+});

package/dist/index.mjs

@@ -0,0 +1,13 @@
+// src/EnquioPopup.tsx
+import { useEffect } from "react";
+import { loadEnquioScript } from "@enquio/popup-core";
+import { jsx } from "react/jsx-runtime";
+function EnquioPopup({ projectId }) {
+  useEffect(() => {
+    loadEnquioScript().then(() => customElements.whenDefined("enquio-popup")).catch(console.error);
+  }, []);
+  return /* @__PURE__ */ jsx("enquio-popup", { "project-id": projectId });
+}
+export {
+  EnquioPopup
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "@enquio/react-popup",
+	"version": "1.0.1",
+	"description": "React popup component for Enquio Web Component",
+	"main": "dist/index.cjs",
+	"module": "dist/index.mjs",
+	"types": "dist/index.d.ts",
+	"files": [
+		"dist"
+	],
+	"sideEffects": false,
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/skutam/EnquioWrappers.git",
+		"directory": "packages/react"
+	},
+	"homepage": "https://github.com/skutam/EnquioWrappers#readme",
+	"bugs": {
+		"url": "https://github.com/skutam/EnquioWrappers/issues"
+	},
+	"keywords": [
+		"enquio",
+		"popup",
+		"react",
+		"web-component",
+		"component"
+	],
+	"license": "MIT",
+	"author": "Enquio Team",
+	"peerDependencies": {
+		"react": ">=17",
+		"react-dom": ">=17"
+	},
+	"devDependencies": {
+		"@types/react": "^18.2.0",
+		"@types/react-dom": "^18.2.0",
+		"tsup": "^8.0.0",
+		"typescript": "^5.3.0"
+	},
+	"dependencies": {
+		"@enquio/popup-core": "1.0.0"
+	},
+	"scripts": {
+		"build": "tsup",
+		"clean": "rm -rf dist",
+		"prepublishOnly": "npm run build"
+	}
+}