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

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,
  },
});

history

The history API provides programmatic access to the undo/redo AppState history.

history.back

A function to move the app state back through the histories.

history.forward

A function to move the app state forward through the histories.

history.hasPast

A boolean describing whether or not the present app state has past history items.

history.hasFuture

A boolean describing whether or not the present app state has future history items.

history.histories

An array describing the recorded history as History objects.

History params

data

The app state payload for this history entry.

id

A unique ID for this history entry.

history.index

The index of the currently selected history in history.histories

selectedItem

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

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

setHistories

A function to set the history state.

const { setHistories } = usePuck();
setHistories([]); // clears all history

setHistoryIndex

A function to set current history index.

const { setHistoryIndex } = usePuck();
setHistoryIndex(2);