Resizable

Resizable panel layout. Built with react-resizable-panels.

Installation

# Install @opencosmos/ui to use Resizable
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

direction— Panel layout direction

Usage

Import

import { Resizable } from '@opencosmos/ui';

Example

<Resizable>
  Content
</Resizable>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
direction	horizontal \| vertical	"horizontal"	Panel layout direction

Code Examples

Basic Usage

Resizable panel layout

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@opencosmos/ui"

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel defaultSize={50}>
    <div>Panel 1</div>
  </ResizablePanel>
  <ResizableHandle />
  <ResizablePanel defaultSize={50}>
    <div>Panel 2</div>
  </ResizablePanel>
</ResizablePanelGroup>