Resizable — usage examples

Resizable ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { Resizable } from '@rozie-ui/resizable-react';

export function Demo() {
  const [split, setSplit] = useState(30);
  return (
    <div style={{ height: 320 }}>
      <Resizable
        size={split}
        onSizeChange={setSplit}
        min={20}
        max={80}
        direction="horizontal"
        renderStart={() => <nav>Sidebar</nav>}
        renderEnd={() => <main>Content</main>}
        onResize={(e) => console.log('split:', e.size)}
      />
    </div>
  );
}

vue

<script setup lang="ts">
import { ref } from 'vue';
import Resizable from '@rozie-ui/resizable-vue';

const split = ref(30);
function onResize(e: { size: number }) {
  console.log('split:', e.size);
}
</script>

<template>
  <div style="height: 320px">
    <Resizable v-model:size="split" :min="20" :max="80" direction="horizontal" @resize="onResize">
      <template #start><nav>Sidebar</nav></template>
      <template #end><main>Content</main></template>
    </Resizable>
  </div>
</template>

svelte

<script lang="ts">
  import Resizable from '@rozie-ui/resizable-svelte';

  let split = $state(30);
</script>

<div style="height: 320px">
  <Resizable
    bind:size={split}
    min={20}
    max={80}
    direction="horizontal"
    onresize={(e) => console.log('split:', e.size)}
  >
    {#snippet start()}<nav>Sidebar</nav>{/snippet}
    {#snippet end()}<main>Content</main>{/snippet}
  </Resizable>
</div>

import { Component } from '@angular/core';
import { Resizable } from '@rozie-ui/resizable-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Resizable],
  template: `
    <div style="height: 320px">
      <Resizable [(size)]="split" [min]="20" [max]="80" direction="horizontal" (resize)="onResize($event)">
        <ng-template #start><nav>Sidebar</nav></ng-template>
        <ng-template #end><main>Content</main></ng-template>
      </Resizable>
    </div>
  `,
})
export class DemoComponent {
  split = 30;
  onResize(e: { size: number }) {
    console.log('split:', e.size);
  }
}

tsx

import { createSignal } from 'solid-js';
import { Resizable } from '@rozie-ui/resizable-solid';

export function Demo() {
  const [split, setSplit] = createSignal(30);
  return (
    <div style={{ height: '320px' }}>
      <Resizable
        size={split()}
        onSizeChange={setSplit}
        min={20}
        max={80}
        direction="horizontal"
        renderStart={() => <nav>Sidebar</nav>}
        renderEnd={() => <main>Content</main>}
        onResize={(e) => console.log('split:', e.size)}
      />
    </div>
  );
}

import '@rozie-ui/resizable-lit';

// <rozie-resizable> is a custom element. Bind `size`/`min`/`max`/`direction`
// as properties; project the two panels into the `start` / `end` slots; listen
// for `resize` to receive the new first-panel percent (and `size-change` for the
// two-way value).
//   <rozie-resizable size="30" min="20" max="80" direction="horizontal">
//     <nav slot="start">Sidebar</nav>
//     <main slot="end">Content</main>
//   </rozie-resizable>
const el = document.querySelector('rozie-resizable');
el.addEventListener('size-change', (e) => {
  el.size = e.detail;
});
el.addEventListener('resize', (e) => {
  console.log('split:', e.detail.size);
});

Imperative handle

Beyond props and events, Resizable exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { Resizable, type ResizableHandle } from '@rozie-ui/resizable-react';

const split = useRef<ResizableHandle>(null);
// <Resizable ref={split} ... />
split.current?.applySize(40);
split.current?.reset();

vue

<script setup>
import { ref } from 'vue';
const split = ref();          // template ref
</script>

<template>
  <Resizable ref="split" v-model:size="size" />
  <button @click="split.reset()">Reset</button>
</template>

svelte

<script>
  let split;                  // component instance via bind:this
</script>

<Resizable bind:this={split} bind:size={size} />
<button onclick={() => split.reset()}>Reset</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(Resizable) split!: Resizable;   // or the viewChild() signal
  setHalf() { this.split.applySize(50); }
  reset() { this.split.reset(); }
}

tsx

import { Resizable, type ResizableHandle } from '@rozie-ui/resizable-solid';

let handle: ResizableHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<Resizable ref={(h) => (handle = h)} size={split()} />;
handle?.reset();

// The custom element IS the handle — exposed methods are public element
// methods.
const el = document.querySelector('rozie-resizable');
el.applySize(40);
el.reset();

Resizable — usage examples ​

Usage ​

Imperative handle ​

See also ​

Resizable — usage examples

Usage

Imperative handle

See also