@rageshpikalmunde/rp-image-editor-react 1.1.0

package/dist/cjs/RpImageEditor.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RpImageEditorComponent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const rp_image_editor_1 = require("@rageshpikalmunde/rp-image-editor");
+/**
+ * React component that renders the image editor inline.
+ * For modal usage, use the `useRpImageEditor()` hook instead.
+ */
+const RpImageEditorComponent = ({ image, config, onImageEdited, onError, className, style, }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    const editorRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!image || !containerRef.current)
+            return;
+        // Destroy previous editor
+        if (editorRef.current) {
+            editorRef.current.destroy();
+        }
+        const editor = new rp_image_editor_1.RpImageEditor(containerRef.current, config);
+        editorRef.current = editor;
+        editor.on('error', (err) => onError?.(err));
+        editor.loadImage(image).catch((err) => onError?.(err));
+        return () => {
+            editor.destroy();
+            editorRef.current = null;
+        };
+    }, [image]); // Re-init when image changes
+    return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: className || 'rp-image-editor-host', style: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 300,
+            ...style,
+        } }));
+};
+exports.RpImageEditorComponent = RpImageEditorComponent;
+//# sourceMappingURL=RpImageEditor.js.map

package/dist/cjs/RpImageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RpImageEditor.js","sourceRoot":"","sources":["../../src/RpImageEditor.tsx"],"names":[],"mappings":";;;;AAAA,iCAA8D;AAC9D,uEAAkG;AAsBlG;;;GAGG;AACI,MAAM,sBAAsB,GAAiC,CAAC,EACnE,KAAK,EACL,MAAM,EACN,aAAa,EACb,OAAO,EACP,SAAS,EACT,KAAK,GACN,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,IAAA,cAAM,EAAuB,IAAI,CAAC,CAAC;IAErD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,OAAO;QAE5C,0BAA0B;QAC1B,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;QAC9B,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,+BAAa,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAC/D,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;QAE3B,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;QAE5C,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;QAEvD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,OAAO,EAAE,CAAC;YACjB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,6BAA6B;IAE1C,OAAO,CACL,gCACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,IAAI,sBAAsB,EAC9C,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,SAAS,EAAE,GAAG;YACd,GAAG,KAAK;SACT,GACD,CACH,CAAC;AACJ,CAAC,CAAC;AA9CW,QAAA,sBAAsB,0BA8CjC"}

package/dist/cjs/index.js

@@ -0,0 +1,14 @@
+"use strict";
+/**
+ * @rageshpikalmunde/rp-image-editor-react
+ * React wrapper for the rp-image-editor plugin
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRpImageEditor = exports.RpImageEditorComponent = void 0;
+// Component
+var RpImageEditor_1 = require("./RpImageEditor");
+Object.defineProperty(exports, "RpImageEditorComponent", { enumerable: true, get: function () { return RpImageEditor_1.RpImageEditorComponent; } });
+// Hook
+var useRpImageEditor_1 = require("./useRpImageEditor");
+Object.defineProperty(exports, "useRpImageEditor", { enumerable: true, get: function () { return useRpImageEditor_1.useRpImageEditor; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;AAEH,YAAY;AACZ,iDAAyD;AAAhD,uHAAA,sBAAsB,OAAA;AAG/B,OAAO;AACP,uDAAsD;AAA7C,oHAAA,gBAAgB,OAAA"}

package/dist/cjs/useRpImageEditor.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRpImageEditor = void 0;
+const react_1 = require("react");
+const rp_image_editor_1 = require("@rageshpikalmunde/rp-image-editor");
+/**
+ * React hook to open the image editor as a modal overlay.
+ *
+ * Usage:
+ * ```tsx
+ * function MyComponent() {
+ *   const { openEditor } = useRpImageEditor();
+ *
+ *   const handleEdit = async (file: File) => {
+ *     const result = await openEditor(file, {
+ *       theme: { applyButtonBackground: '#28a745' }
+ *     });
+ *     if (result) {
+ *       console.log(result.file); // upload
+ *     }
+ *   };
+ * }
+ * ```
+ */
+function useRpImageEditor() {
+    const openEditor = (0, react_1.useCallback)(async (image, config) => {
+        return (0, rp_image_editor_1.openEditorModal)({ image, config });
+    }, []);
+    return { openEditor };
+}
+exports.useRpImageEditor = useRpImageEditor;
+//# sourceMappingURL=useRpImageEditor.js.map

package/dist/cjs/useRpImageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRpImageEditor.js","sourceRoot":"","sources":["../../src/useRpImageEditor.ts"],"names":[],"mappings":";;;AAAA,iCAAoC;AACpC,uEAI2C;AAE3C;;;;;;;;;;;;;;;;;;GAkBG;AACH,SAAgB,gBAAgB;IAC9B,MAAM,UAAU,GAAG,IAAA,mBAAW,EAC5B,KAAK,EACH,KAA2B,EAC3B,MAAgC,EACA,EAAE;QAClC,OAAO,IAAA,iCAAe,EAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IAC5C,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO,EAAE,UAAU,EAAE,CAAC;AACxB,CAAC;AAZD,4CAYC"}

package/dist/esm/RpImageEditor.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+import { RpImageEditor } from '@rageshpikalmunde/rp-image-editor';
+/**
+ * React component that renders the image editor inline.
+ * For modal usage, use the `useRpImageEditor()` hook instead.
+ */
+export const RpImageEditorComponent = ({ image, config, onImageEdited, onError, className, style, }) => {
+    const containerRef = useRef(null);
+    const editorRef = useRef(null);
+    useEffect(() => {
+        if (!image || !containerRef.current)
+            return;
+        // Destroy previous editor
+        if (editorRef.current) {
+            editorRef.current.destroy();
+        }
+        const editor = new RpImageEditor(containerRef.current, config);
+        editorRef.current = editor;
+        editor.on('error', (err) => onError?.(err));
+        editor.loadImage(image).catch((err) => onError?.(err));
+        return () => {
+            editor.destroy();
+            editorRef.current = null;
+        };
+    }, [image]); // Re-init when image changes
+    return (_jsx("div", { ref: containerRef, className: className || 'rp-image-editor-host', style: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 300,
+            ...style,
+        } }));
+};
+//# sourceMappingURL=RpImageEditor.js.map

package/dist/esm/RpImageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RpImageEditor.js","sourceRoot":"","sources":["../../src/RpImageEditor.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,MAAM,EAAE,SAAS,EAAe,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAkC,MAAM,mCAAmC,CAAC;AAsBlG;;;GAGG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAiC,CAAC,EACnE,KAAK,EACL,MAAM,EACN,aAAa,EACb,OAAO,EACP,SAAS,EACT,KAAK,GACN,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,SAAS,GAAG,MAAM,CAAuB,IAAI,CAAC,CAAC;IAErD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,OAAO;QAE5C,0BAA0B;QAC1B,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;QAC9B,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,aAAa,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;QAC/D,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;QAE3B,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;QAE5C,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;QAEvD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,OAAO,EAAE,CAAC;YACjB,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,6BAA6B;IAE1C,OAAO,CACL,cACE,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,SAAS,IAAI,sBAAsB,EAC9C,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,SAAS,EAAE,GAAG;YACd,GAAG,KAAK;SACT,GACD,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+/**
+ * @rageshpikalmunde/rp-image-editor-react
+ * React wrapper for the rp-image-editor plugin
+ */
+// Component
+export { RpImageEditorComponent } from './RpImageEditor';
+// Hook
+export { useRpImageEditor } from './useRpImageEditor';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,YAAY;AACZ,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO;AACP,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/esm/useRpImageEditor.js

@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+import { openEditorModal, } from '@rageshpikalmunde/rp-image-editor';
+/**
+ * React hook to open the image editor as a modal overlay.
+ *
+ * Usage:
+ * ```tsx
+ * function MyComponent() {
+ *   const { openEditor } = useRpImageEditor();
+ *
+ *   const handleEdit = async (file: File) => {
+ *     const result = await openEditor(file, {
+ *       theme: { applyButtonBackground: '#28a745' }
+ *     });
+ *     if (result) {
+ *       console.log(result.file); // upload
+ *     }
+ *   };
+ * }
+ * ```
+ */
+export function useRpImageEditor() {
+    const openEditor = useCallback(async (image, config) => {
+        return openEditorModal({ image, config });
+    }, []);
+    return { openEditor };
+}
+//# sourceMappingURL=useRpImageEditor.js.map

package/dist/esm/useRpImageEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRpImageEditor.js","sourceRoot":"","sources":["../../src/useRpImageEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAGL,eAAe,GAChB,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,UAAU,GAAG,WAAW,CAC5B,KAAK,EACH,KAA2B,EAC3B,MAAgC,EACA,EAAE;QAClC,OAAO,eAAe,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC;IAC5C,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO,EAAE,UAAU,EAAE,CAAC;AACxB,CAAC"}

package/dist/types/RpImageEditor.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { RpEditorConfig, RpEditorResult } from '@rageshpikalmunde/rp-image-editor';
+export interface RpImageEditorProps {
+    /** Image source — File, Blob, or URL string */
+    image: File | Blob | string | null;
+    /** Editor configuration */
+    config?: Partial<RpEditorConfig>;
+    /** Called when user clicks Apply */
+    onImageEdited?: (result: RpEditorResult) => void;
+    /** Called when editor encounters an error */
+    onError?: (error: Error) => void;
+    /** Custom class name for the container */
+    className?: string;
+    /** Custom style for the container */
+    style?: React.CSSProperties;
+}
+/**
+ * React component that renders the image editor inline.
+ * For modal usage, use the `useRpImageEditor()` hook instead.
+ */
+export declare const RpImageEditorComponent: React.FC<RpImageEditorProps>;

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @rageshpikalmunde/rp-image-editor-react
+ * React wrapper for the rp-image-editor plugin
+ */
+export { RpImageEditorComponent } from './RpImageEditor';
+export type { RpImageEditorProps } from './RpImageEditor';
+export { useRpImageEditor } from './useRpImageEditor';
+export type { RpEditorConfig, RpEditorTheme, RpEditorResult, CropAspectRatio, EditorMode, } from '@rageshpikalmunde/rp-image-editor';

package/dist/types/useRpImageEditor.d.ts

@@ -0,0 +1,23 @@
+import { RpEditorConfig, RpEditorResult } from '@rageshpikalmunde/rp-image-editor';
+/**
+ * React hook to open the image editor as a modal overlay.
+ *
+ * Usage:
+ * ```tsx
+ * function MyComponent() {
+ *   const { openEditor } = useRpImageEditor();
+ *
+ *   const handleEdit = async (file: File) => {
+ *     const result = await openEditor(file, {
+ *       theme: { applyButtonBackground: '#28a745' }
+ *     });
+ *     if (result) {
+ *       console.log(result.file); // upload
+ *     }
+ *   };
+ * }
+ * ```
+ */
+export declare function useRpImageEditor(): {
+    openEditor: (image: File | Blob | string, config?: Partial<RpEditorConfig>) => Promise<RpEditorResult | null>;
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@rageshpikalmunde/rp-image-editor-react",
+  "version": "1.1.0",
+  "description": "React wrapper for rp-image-editor — use inside Ionic+React apps",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "npm run build:esm && npm run build:cjs && npm run build:types",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:types": "tsc -p tsconfig.types.json",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "image-editor",
+    "react",
+    "ionic",
+    "capacitor"
+  ],
+  "author": "Ragesh Pikalmunde",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@rageshpikalmunde/rp-image-editor": "^1.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@types/react": "^18.2.0",
+    "typescript": "~5.3.0"
+  }
+}