Docs
API Reference
usePuck

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

ParamExampleType
appState{ data: {}, ui: {} }AppState
dispatch(action: PuckAction) => voidFunction

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