Resize handle

TS

import { … } from "@fungi.computer/caps/components/resize-handle";

Hero

TSX

import { ResizeHandle } from "@fungi.computer/caps/components/resize-handle";

export default function Hero() {
  return (
    <div className="flex h-24 max-w-sm items-stretch rounded-box border border-base-300">
      <div className="flex-1 p-sm text-sm">Patch list</div>
      <ResizeHandle
        aria-label="Resize patch list"
        orientation="horizontal"
        min={80}
        max={320}
        value={160}
        onValueChange={() => undefined}
      />
      <div className="flex-1 p-sm text-sm">Map</div>
    </div>
  );
}

Orientation

TSX

import { ResizeHandle } from "@fungi.computer/caps/components/resize-handle";

export default function Orientation() {
  return (
    <div className="flex max-w-sm gap-lg">
      <div className="flex h-20 items-stretch gap-xs">
        <div className="p-sm text-sm">Left</div>
        <ResizeHandle
          aria-label="Horizontal resize"
          orientation="horizontal"
          min={0}
          max={100}
          value={50}
          onValueChange={() => undefined}
        />
      </div>
      <div className="grid w-20 gap-xs">
        <div className="p-sm text-sm">Top</div>
        <ResizeHandle
          aria-label="Vertical resize"
          orientation="vertical"
          variant="notch"
          min={0}
          max={100}
          value={50}
          onValueChange={() => undefined}
        />
      </div>
    </div>
  );
}

Controlled

TSX

import { ResizeHandle } from "@fungi.computer/caps/components/resize-handle";
import { useState } from "react";

export default function Controlled() {
  const [width, setWidth] = useState(180);
  return (
    <div className="grid max-w-sm gap-sm">
      <p className="text-sm">Patch list width: {width}px</p>
      <div className="flex h-20 items-stretch rounded-box border border-base-300">
        <div style={{ width }} className="p-sm text-sm">
          Patch list
        </div>
        <ResizeHandle
          aria-label="Resize patch list"
          orientation="horizontal"
          min={100}
          max={320}
          value={width}
          onValueChange={setWidth}
        />
        <div className="flex-1 p-sm text-sm">Map</div>
      </div>
    </div>
  );
}

Props

ResizeHandleProps

Prop	Type	Description
aria-label	string
orientation	"horizontal" | "vertical"
variant?	"grip" | "notch"
value	number
min	number
max	number
onValueChange()	(value) => void	Receives a clamped pixel position from keyboard controls.

• aria-labelstring
• orientation"horizontal" | "vertical"
• variant?"grip" | "notch"
• valuenumber
• minnumber
• maxnumber
• onValueChange()(value) => void

  Receives a clamped pixel position from keyboard controls.

Full types: API reference.