feat: add selectedItem convenience param to usePuck

measuredco · Mar 25, 2024 · c1224d0 · c1224d0
1 parent 8d36812
commit c1224d0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 6 deletions.
diff --git a/apps/docs/pages/docs/api-reference/functions/use-puck.mdx b/apps/docs/pages/docs/api-reference/functions/use-puck.mdx
@@ -28,10 +28,11 @@ export function Editor() {
 
 ## Returns
 
-| Param                   | Example                        | Type                                      |
-| ----------------------- | ------------------------------ | ----------------------------------------- |
-| [`appState`](#appstate) | `{ data: {}, ui: {} }`         | [AppState](/docs/api-reference/app-state) |
-| [`dispatch`](#dispatch) | `(action: PuckAction) => void` | Function                                  |
+| Param                           | Example                                          | Type                                                |
+| ------------------------------- | ------------------------------------------------ | --------------------------------------------------- |
+| [`appState`](#appstate)         | `{ data: {}, ui: {} }`                           | [AppState](/docs/api-reference/app-state)           |
+| [`dispatch`](#dispatch)         | `(action: PuckAction) => void`                   | Function                                            |
+| [`selectedItem`](#selecteditem) | `{ type: "Heading", props: {id: "my-heading"} }` | [ComponentData](/docs/api-reference/data#content-1) |
 
 ### `appState`
 
@@ -54,3 +55,12 @@ dispatch({
   },
 });
 ```
+
+### `selectedItem`
+
+The currently selected item, as defined by `appState.ui.itemSelector`.
+
+```tsx
+console.log(selectedItem);
+// { type: "Heading", props: {id: "my-heading"} }
+```
diff --git a/packages/core/lib/use-puck.ts b/packages/core/lib/use-puck.ts
@@ -1,7 +1,19 @@
 import { useAppContext } from "../components/Puck/context";
 
 export const usePuck = () => {
-  const { state: appState, config, history, dispatch } = useAppContext();
+  const {
+    state: appState,
+    config,
+    history,
+    dispatch,
+    selectedItem,
+  } = useAppContext();
 
-  return { appState, config, dispatch, history };
+  return {
+    appState,
+    config,
+    dispatch,
+    history,
+    selectedItem: selectedItem || null,
+  };
 };