@fieldnotes/react 0.1.3 → 0.2.0

package/README.md

@@ -56,7 +56,7 @@ function App() {
 }
 ```
 
-Embedded React components are fully interactive — clicks, inputs, forms all work normally.
+Embedded components use a **two-mode interaction model**: by default they can be selected, dragged, and resized. **Double-click** to enter interact mode (clicks, inputs, forms work). **Escape** or click outside to exit.
 
 ## Hooks
 
@@ -116,6 +116,25 @@ function CameraInfo() {
 }
 ```
 
+### Changing Tool Options
+
+Use `useViewport()` to access tool instances and change options at runtime:
+
+```tsx
+import { useViewport } from '@fieldnotes/react';
+import type { PencilTool } from '@fieldnotes/core';
+
+function ColorPicker() {
+  const viewport = useViewport();
+
+  const setColor = (color: string) => {
+    viewport.toolManager.getTool<PencilTool>('pencil')?.setOptions({ color });
+  };
+
+  return <input type="color" onChange={(e) => setColor(e.target.value)} />;
+}
+```
+
 ## Component API
 
 ### `<FieldNotesCanvas>`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldnotes/react",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "React wrapper for Field Notes canvas SDK",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -18,7 +18,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@fieldnotes/core": "0.2.0"
+    "@fieldnotes/core": "0.2.1"
   },
   "peerDependencies": {
     "react": ">=18",