@ninesstudios/whiteboard 0.1.4 → 0.1.6

package/README.md

@@ -140,6 +140,33 @@ function App() {
 | `isLocked` | `boolean` | `false` | When `true`, disables all editing tools and shows a lock indicator. |
 | `lockText` | `string` | `undefined` | Custom text to display on the lock indicator when `isLocked` is true. |
 | `onLockChange` | `(isLocked: boolean) => void` | `undefined` | Callback fired when the lock state changes. |
+| `onImageUpload` | `(file: File) => Promise<string>` | `undefined` | Async callback to handle image uploads. Must return a Promise that resolves to the image URL. |
+
+### Handling Image Uploads
+
+By default, the whiteboard creates temporary Blob URLs for uploaded images. This works great for local sessions but won't work for real-time collaboration because Blob URLs are local to the browser tab.
+
+To support multiplayer image sharing, you must provide the `onImageUpload` prop. This function should upload the file to your server (e.g., S3, Cloudinary) and return the public URL.
+
+```jsx
+const handleImageUpload = async (file) => {
+  // 1. Upload file to your server
+  const formData = new FormData();
+  formData.append('file', file);
+  
+  const response = await fetch('https://your-api.com/upload', {
+    method: 'POST',
+    body: formData
+  });
+  
+  const data = await response.json();
+  
+  // 2. Return the public URL
+  return data.url; 
+};
+
+<Whiteboard onImageUpload={handleImageUpload} />
+```
 
 ### Ref Methods