@rageshpikalmunde/rp-image-editor-react 1.5.13 → 1.6.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 rpragesh
+
+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,74 @@
+# @rageshpikalmunde/rp-image-editor-react
+
+React image editor and annotation component for [`@rageshpikalmunde/rp-image-editor`](https://www.npmjs.com/package/@rageshpikalmunde/rp-image-editor): crop, rotate, draw, text, arrows, shapes, callouts, filters and multi-image editing. Accessible (WCAG 2.2 AA), mobile-ready, TypeScript.
+
+[Live demo](https://rpragesh.github.io/image-editor/) · [React guide](https://rpragesh.github.io/image-editor/react-image-editor/) · [React example on StackBlitz](https://stackblitz.com/github/rpragesh/image-editor/tree/main/examples/react) · [API reference](https://rpragesh.github.io/image-editor/api/) · [Full docs](https://github.com/rpragesh/image-editor#readme)
+
+[![rp-image-editor: multi-image editing, crop, arrows and filters](https://rpragesh.github.io/image-editor/demo.gif)](https://rpragesh.github.io/image-editor/)
+
+## Install
+
+```bash
+npm install @rageshpikalmunde/rp-image-editor @rageshpikalmunde/rp-image-editor-react
+```
+
+Works with React 17 and newer (Vite, CRA, Next.js, Ionic React).
+
+## Open the editor as a modal
+
+```tsx
+import { useRpImageEditor } from '@rageshpikalmunde/rp-image-editor-react';
+
+export function PhotoUpload() {
+  const { openEditor } = useRpImageEditor();
+
+  async function onFile(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const result = await openEditor(file, { exportFormat: 'jpeg' });
+    if (result) upload(result.file); // also result.blob and result.base64
+  }
+
+  return <input type="file" accept="image/*" onChange={onFile} />;
+}
+```
+
+`openEditor` resolves with the edited image when the user clicks Apply, or `null` if they close the editor.
+
+## Edit several images at once
+
+```tsx
+const { openMultiEditor } = useRpImageEditor();
+
+const results = await openMultiEditor(files, { exportFormat: 'jpeg' });
+// [{ index, edited, result }] for every image, or null if closed
+```
+
+A thumbnail strip switches between images, each keeps its own undo history, and Close asks before discarding edits.
+
+## Inline editor
+
+```tsx
+import { RpImageEditorComponent } from '@rageshpikalmunde/rp-image-editor-react';
+
+<RpImageEditorComponent
+  image={file}
+  config={{ language: 'de' }}
+  onImageEdited={(result) => upload(result.file)}
+  style={{ height: 600 }}
+/>
+```
+
+Passing `onImageEdited` shows the editor's Apply button.
+
+## Next.js
+
+The editor needs the browser (DOM and canvas). Call `openEditor` from an event handler, or load `RpImageEditorComponent` with `next/dynamic` and `ssr: false`.
+
+## Configuration
+
+Every option of the core package works here: themes, 15 languages, which tools to show, crop ratios, filter presets, export format and quality. See the [configuration docs](https://github.com/rpragesh/image-editor/blob/main/packages/core/README.md#configuration).
+
+## License
+
+MIT © Ragesh Pikalmunde

package/dist/cjs/useRpImageEditor.js

@@ -4,7 +4,8 @@ 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.
+ * React hook to open the image editor as a modal overlay
+ * (`openEditor` for one image, `openMultiEditor` for several).
  *
  * Usage:
  * ```tsx
@@ -26,7 +27,10 @@ function useRpImageEditor() {
     const openEditor = (0, react_1.useCallback)(async (image, config) => {
         return (0, rp_image_editor_1.openEditorModal)({ image, config });
     }, []);
-    return { openEditor };
+    const openMultiEditor = (0, react_1.useCallback)(async (images, config, startIndex) => {
+        return (0, rp_image_editor_1.openMultiEditorModal)({ images, config, startIndex });
+    }, []);
+    return { openEditor, openMultiEditor };
 }
 exports.useRpImageEditor = useRpImageEditor;
 //# sourceMappingURL=useRpImageEditor.js.map

package/dist/cjs/useRpImageEditor.js.map

@@ -1 +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"}
+{"version":3,"file":"useRpImageEditor.js","sourceRoot":"","sources":["../../src/useRpImageEditor.ts"],"names":[],"mappings":";;;AAAA,iCAAoC;AACpC,uEAM2C;AAE3C;;;;;;;;;;;;;;;;;;;GAmBG;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,MAAM,eAAe,GAAG,IAAA,mBAAW,EACjC,KAAK,EACH,MAAmC,EACnC,MAAgC,EAChC,UAAmB,EACwB,EAAE;QAC7C,OAAO,IAAA,sCAAoB,EAAC,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC;IAC9D,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC;AACzC,CAAC;AAvBD,4CAuBC"}

package/dist/esm/useRpImageEditor.js

@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
-import { openEditorModal, } from '@rageshpikalmunde/rp-image-editor';
+import { openEditorModal, openMultiEditorModal, } from '@rageshpikalmunde/rp-image-editor';
 /**
- * React hook to open the image editor as a modal overlay.
+ * React hook to open the image editor as a modal overlay
+ * (`openEditor` for one image, `openMultiEditor` for several).
  *
  * Usage:
  * ```tsx
@@ -23,6 +24,9 @@ export function useRpImageEditor() {
     const openEditor = useCallback(async (image, config) => {
         return openEditorModal({ image, config });
     }, []);
-    return { openEditor };
+    const openMultiEditor = useCallback(async (images, config, startIndex) => {
+        return openMultiEditorModal({ images, config, startIndex });
+    }, []);
+    return { openEditor, openMultiEditor };
 }
 //# sourceMappingURL=useRpImageEditor.js.map

package/dist/esm/useRpImageEditor.js.map

@@ -1 +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"}
+{"version":3,"file":"useRpImageEditor.js","sourceRoot":"","sources":["../../src/useRpImageEditor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACpC,OAAO,EAIL,eAAe,EACf,oBAAoB,GACrB,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;GAmBG;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,MAAM,eAAe,GAAG,WAAW,CACjC,KAAK,EACH,MAAmC,EACnC,MAAgC,EAChC,UAAmB,EACwB,EAAE;QAC7C,OAAO,oBAAoB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC,CAAC;IAC9D,CAAC,EACD,EAAE,CACH,CAAC;IAEF,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,CAAC;AACzC,CAAC"}

package/dist/types/index.d.ts

@@ -5,4 +5,4 @@
 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';
+export type { RpEditorConfig, RpEditorTheme, RpEditorResult, RpMultiEditorItemResult, CropAspectRatio, EditorMode, } from '@rageshpikalmunde/rp-image-editor';

package/dist/types/useRpImageEditor.d.ts

@@ -1,6 +1,7 @@
-import { RpEditorConfig, RpEditorResult } from '@rageshpikalmunde/rp-image-editor';
+import { RpEditorConfig, RpEditorResult, RpMultiEditorItemResult } from '@rageshpikalmunde/rp-image-editor';
 /**
- * React hook to open the image editor as a modal overlay.
+ * React hook to open the image editor as a modal overlay
+ * (`openEditor` for one image, `openMultiEditor` for several).
  *
  * Usage:
  * ```tsx
@@ -20,4 +21,5 @@ import { RpEditorConfig, RpEditorResult } from '@rageshpikalmunde/rp-image-edito
  */
 export declare function useRpImageEditor(): {
     openEditor: (image: File | Blob | string, config?: Partial<RpEditorConfig>) => Promise<RpEditorResult | null>;
+    openMultiEditor: (images: Array<File | Blob | string>, config?: Partial<RpEditorConfig>, startIndex?: number) => Promise<RpMultiEditorItemResult[] | null>;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rageshpikalmunde/rp-image-editor-react",
-  "version": "1.5.13",
-  "description": "React wrapper for rp-image-editor with crop, annotation, filters, and native-resolution export support",
+  "version": "1.6.1",
+  "description": "React image editor and annotation component (rp-image-editor): crop, rotate, draw, text, shapes, callouts, filters and multi-image editing. Accessible and mobile-ready.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -23,20 +23,24 @@
     "clean": "rm -rf dist"
   },
   "keywords": [
-    "image-editor",
     "react-image-editor",
     "react-photo-editor",
+    "react-image-crop",
+    "react-image-annotation",
+    "image-editor",
+    "photo-editor",
     "image-annotation",
+    "image-cropper",
     "screenshot-annotation",
-    "crop",
-    "draw",
-    "shapes",
-    "callout",
+    "multi-image",
+    "image-filters",
+    "accessible",
     "fabricjs",
     "react",
     "ionic",
     "ionic-react",
-    "capacitor"
+    "capacitor",
+    "typescript"
   ],
   "author": "Ragesh Pikalmunde",
   "license": "MIT",
@@ -44,7 +48,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@rageshpikalmunde/rp-image-editor": "^1.5.13"
+    "@rageshpikalmunde/rp-image-editor": "^1.6.1"
   },
   "peerDependencies": {
     "react": ">=17.0.0",
@@ -55,5 +59,14 @@
     "react-dom": "^18.2.0",
     "@types/react": "^18.2.0",
     "typescript": "~5.3.0"
+  },
+  "homepage": "https://rpragesh.github.io/image-editor/react-image-editor/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rpragesh/image-editor.git",
+    "directory": "packages/react"
+  },
+  "bugs": {
+    "url": "https://github.com/rpragesh/image-editor/issues"
   }
 }