Frame Size

PreviousNext

How to change the size of the frame.

You can change the size of the frame by passing frameSize prop to the <Designer /> component.

components/custom-designer.tsx
import { Designer, DesignerFrame } from "@shadcn/designer"
 
function CustomDesigner() {
  return (
    <Designer frameSize={{ width: 1024, height: 1024 }}>
      <DesignerFrame />
    </Designer>
  )
}

useFrameSize

You can use the useFrameSize hook to get the current frame size.

components/custom-designer.tsx
import { useFrameSize } from "@shadcn/designer"
 
function CustomDesigner() {
  const { width, height } = useFrameSize()
 
  return <div>Frame Size: {width}x{height}</div>
}

useSetFrameSize

Use the useSetFrameSize hook to set the frame size. It returns a function that you can call to set the frame size.

components/custom-designer.tsx
import { useFrameSize, useSetFrameSize, useDesignerAction, Action, ActionControls, ActionLabel } from "@shadcn/designer"
 
function ActionFrameSize() {
  const { width, height } = useFrameSize()
  const setFrameSize = useSetFrameSize()
  const designerAction = useDesignerAction()
 
  const handleFrameSizeChange = (value: string) => {
    const [width, height] = value.split("x")
    if (!width || !height) {
      return
    }
 
    setFrameSize({
      width: Number.parseInt(width),
      height: Number.parseInt(height),
    })
    designerAction("ZOOM_FIT")
  }
 
  return (
    <Action className="gap-0">
      <ActionLabel htmlFor="frame-size">Frame Size</ActionLabel>
      <ActionControls>
        <Select
          value={`${width}x${height}`}
          onValueChange={handleFrameSizeChange}
        >
          <SelectTrigger>
            <SelectValue placeholder="Select Frame Size" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="800x600">800x600</SelectItem>
            <SelectItem value="1024x1024">1024x1024</SelectItem>
            <SelectItem value="1280x720">1280x720</SelectItem>
            <SelectItem value="1080x1920">1080x1920</SelectItem>
          </SelectContent>
        </Select>
      </ActionControls>
    </Action>
  )
}
Export LayersHistory