Designer Tool

PreviousNext

Switch between Move and Hand tools for different interaction modes.

The example shows how to use the useDesignerTool and useSetDesignerTool hooks to switch between hand mode and move mode.

Use the Cursor and Hand buttons in the toolbar to switch.

The examples are best viewed in full screen. Click here to open in new tab.

Switching Tools Programmatically

Use the useSetDesignerTool hook to change tools programmatically:

components/custom-tool-switcher.tsx
import { useDesignerTool, useSetDesignerTool } from "@shadcn/designer"
import { Button } from "@/components/ui/button"
 
function CustomToolSwitcher() {
  const tool = useDesignerTool()
  const setTool = useSetDesignerTool()
 
  return (
    <div className="flex gap-2">
      <Button onClick={() => setTool("move")}>
        Move
      </Button>
      <Button onClick={() => setTool("hand")}>
        Hand
      </Button>
    </div>
  )
}

API Reference

For more details on the hooks, see the Hooks Reference.

Blob EditorExport Layers