@pixelvault-dev/paste-react 0.1.0 → 0.1.1

package/README.md

@@ -9,14 +9,20 @@ import { usePaste } from "@pixelvault-dev/paste-react";
 
 function Editor() {
   const ref = useRef<HTMLTextAreaElement>(null);
-  usePaste(ref, { publishableKey: "pv_pub_xxxxxxxx" });
-  return <textarea ref={ref} />;
+  const { openFilePicker } = usePaste(ref, { publishableKey: "pv_pub_xxxxxxxx" });
+  return (
+    <>
+      <textarea ref={ref} />
+      <button onClick={openFilePicker}>Upload image</button>
+    </>
+  );
 }
 ```
 
 `usePaste(ref, options)` attaches on mount and detaches on unmount. It
 re-attaches if any option changes, so memoize callback options (`useCallback`)
-to avoid needless re-attaching.
+to avoid needless re-attaching. It returns `{ openFilePicker }` — call it (e.g.
+from a button) to open the OS file dialog and insert the chosen image(s).
 
 See [`@pixelvault-dev/paste`](../paste) for the full `PasteOptions` reference. Get a
 publishable key (`pv_pub_…`) in the PixelVault dashboard.

package/dist/index.d.ts

@@ -6,13 +6,22 @@ import { type PasteOptions, type PasteTarget } from "@pixelvault-dev/paste";
  *
  * ```tsx
  * const ref = useRef<HTMLTextAreaElement>(null);
- * usePaste(ref, { publishableKey: "pv_pub_…" });
- * return <textarea ref={ref} />;
+ * const { openFilePicker } = usePaste(ref, { publishableKey: "pv_pub_…" });
+ * return (
+ *   <>
+ *     <textarea ref={ref} />
+ *     <button onClick={openFilePicker}>Upload image</button>
+ *   </>
+ * );
  * ```
  *
  * The listeners are re-attached if any option changes, so memoize callback
- * options (useCallback) to avoid needless re-attaching.
+ * options (useCallback) to avoid needless re-attaching. Returns
+ * `openFilePicker`, which opens the OS file dialog and inserts the chosen
+ * image(s) into the field.
  */
-export declare function usePaste(ref: RefObject<PasteTarget | null>, options: PasteOptions): void;
+export declare function usePaste(ref: RefObject<PasteTarget | null>, options: PasteOptions): {
+    openFilePicker: () => void;
+};
 export { PixelVaultPasteError } from "@pixelvault-dev/paste";
 export type { PasteOptions, PasteTarget, UploadResult } from "@pixelvault-dev/paste";

package/dist/index.js

@@ -1,17 +1,24 @@
 import { useEffect } from "react";
-import { attachPaste } from "@pixelvault-dev/paste";
+import { attachPaste, openFilePicker, } from "@pixelvault-dev/paste";
 /**
  * Add paste-and-host behavior to a textarea/input for the lifetime of the
  * component. Pass a ref to the field and your publishable-key options.
  *
  * ```tsx
  * const ref = useRef<HTMLTextAreaElement>(null);
- * usePaste(ref, { publishableKey: "pv_pub_…" });
- * return <textarea ref={ref} />;
+ * const { openFilePicker } = usePaste(ref, { publishableKey: "pv_pub_…" });
+ * return (
+ *   <>
+ *     <textarea ref={ref} />
+ *     <button onClick={openFilePicker}>Upload image</button>
+ *   </>
+ * );
  * ```
  *
  * The listeners are re-attached if any option changes, so memoize callback
- * options (useCallback) to avoid needless re-attaching.
+ * options (useCallback) to avoid needless re-attaching. Returns
+ * `openFilePicker`, which opens the OS file dialog and inserts the chosen
+ * image(s) into the field.
  */
 export function usePaste(ref, options) {
     const { publishableKey, endpoint, folder, render, onUploadStart, onUploadComplete, onError, } = options;
@@ -29,5 +36,11 @@ export function usePaste(ref, options) {
             onError,
         });
     }, [ref, publishableKey, endpoint, folder, render, onUploadStart, onUploadComplete, onError]);
+    return {
+        openFilePicker: () => {
+            if (ref.current)
+                openFilePicker(ref.current, options);
+        },
+    };
 }
 export { PixelVaultPasteError } from "@pixelvault-dev/paste";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixelvault-dev/paste-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "license": "MIT",
   "description": "React binding for @pixelvault-dev/paste — a usePaste hook that adds paste-and-host to a textarea/input ref.",
@@ -44,7 +44,7 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@pixelvault-dev/paste": "^0.1.0"
+    "@pixelvault-dev/paste": "^0.1.1"
   },
   "peerDependencies": {
     "react": ">=17"