You can use the useUndo and useRedo hooks to undo and redo actions. We also provide useCanUndo and useCanRedo hooks to check if you can undo or redo.
Try it out: Select, drag and resize the text layer. Then use the undo and redo buttons to undo and redo the actions.
import { useUndo, useRedo, useCanUndo, useCanRedo } from "@shadcn/designer"
function HistoryControls() {
const canUndo = useCanUndo()
const canRedo = useCanRedo()
const undo = useUndo()
const redo = useRedo()
return (
<div>
<button onClick={undo} disabled={!canUndo}>Undo</button>
<button onClick={redo} disabled={!canRedo}>Redo</button>
</div>
)
}ActionToolbarHistory
The ActionToolbarHistory component is a toolbar button that allows you to undo and redo actions.
import { Designer, DesignerToolbar, ActionToolbarHistory } from "@shadcn/designer"
function CustomDesigner() {
return (
<Designer>
<DesignerToolbar>
<ActionToolbarHistory />
</DesignerToolbar>
</Designer>
)
}