Resizable · grasscn

Resizable panel composition with original recipe-arrow constituents.

Preview

Example source could not be loaded: resizable-example. Reload this page to retry.

Usage

This port forwards react-resizable-panels v4 GroupProps. Use orientation and groupRef, percentage strings for panel defaultSize/minSize, and onLayoutChanged for completed layout updates. The example names panels left/right, constrains both to 30%, and resets with groupRef.setLayout({left:50,right:50}). Do not use the older direction or onLayout API.

Composition

ResizableHandle defaults to withHandle=false; set it to show opposing original recipe arrows. Keep the separator accessible name and library keyboard handling. Panel percentages, drag hitbox, overall track and vertical rotation are web adaptations, not a vanilla split-pane widget.

Installation

Loading registry address

Component source

This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.

"use client";

import * as React from "react";
import * as ResizablePrimitive from "react-resizable-panels";

import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";

import "./minecraft-resizable.css";
import "./minecraft-resizable-assets.css";

interface ResizableScaleStyle extends React.CSSProperties {
  "--mc-scale": number;

Interactive playground

Bag

Grid

50% / 50%Choose supplies or a recipeDrag between the arrows. Focus the divider and use arrow keys.

For the inherited interaction contract, see react-resizable-panels. The restrictions above describe the installed Grasscn implementation.