usePuck

A hook for building custom components that can interact with Puck.

import { Puck, usePuck } from "@measured/puck";
 
const JSONRenderer = () => {
  const { appState } = usePuck();
 
  return <div>{JSON.stringify(appState.data)}</div>;
};
 
export function Editor() {
  return (
    <Puck>
      <JSONRenderer />
    </Puck>
  );
}

Components using the usePuck hook must be rendered within the <Puck> context as children, overrides or plugins.

Returns

Param	Example	Type
`appState`	`{ data: {}, ui: {} }`	AppState
`dispatch`	`(action: PuckAction) => void`	Function
`selectedItem`	`{ type: "Heading", props: {id: "my-heading"} }`	ComponentData

`appState`

The current application state for this Puck instance.

console.log(appState.data);
// { content: [], root: {}, zones: {} }

`dispatch`

Execute an action to mutate the Puck application state.

dispatch({
  type: "setUi",
  ui: {
    leftSideBarVisible: false,
  },
});

`selectedItem`

The currently selected item, as defined by appState.ui.itemSelector.

console.log(selectedItem);
// { type: "Heading", props: {id: "my-heading"} }

transformProps Overrides