SortableList — usage examples

SortableList 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

React

import { useState } from 'react';
import { SortableList } from '@rozie-ui/sortable-list-react';

export function Demo() {
  const [items, setItems] = useState([
    { id: '1', label: 'Apple' },
    { id: '2', label: 'Banana' },
  ]);
  return (
    <SortableList items={items} onItemsChange={setItems} itemKey="id">
      {({ item }) => <span>{item.label}</span>}
    </SortableList>
  );
}

Vue

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

const items = ref([
  { id: '1', label: 'Apple' },
  { id: '2', label: 'Banana' },
]);
</script>

<template>
  <SortableList v-model:items="items" item-key="id">
    <template #default="{ item }">
      <span>{{ item.label }}</span>
    </template>
  </SortableList>
</template>

Svelte

<script lang="ts">
  import SortableList from '@rozie-ui/sortable-list-svelte';

  let items = $state([
    { id: '1', label: 'Apple' },
    { id: '2', label: 'Banana' },
  ]);
</script>

<SortableList bind:items itemKey="id">
  {#snippet default({ item })}
    <span>{item.label}</span>
  {/snippet}
</SortableList>

Angular

import { Component } from '@angular/core';
import { SortableList } from '@rozie-ui/sortable-list-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [SortableList],
  template: `
    <SortableList [items]="items" (itemsChange)="items = $event" itemKey="id">
      <ng-template #default let-item="item">
        <span>{{ item.label }}</span>
      </ng-template>
    </SortableList>
  `,
})
export class DemoComponent {
  items = [
    { id: '1', label: 'Apple' },
    { id: '2', label: 'Banana' },
  ];
}

Solid

import { createSignal } from 'solid-js';
import { SortableList } from '@rozie-ui/sortable-list-solid';

export function Demo() {
  const [items, setItems] = createSignal([
    { id: '1', label: 'Apple' },
    { id: '2', label: 'Banana' },
  ]);
  return (
    <SortableList items={items()} onItemsChange={setItems} itemKey="id">
      {({ item }) => <span>{item().label}</span>}
    </SortableList>
  );
}

Lit

import '@rozie-ui/sortable-list-lit';

// <sortable-list> is a custom element. Bind `items` as a property and
// listen for the `items-change` event to receive the reordered array.
const el = document.querySelector('sortable-list');
el.items = [
  { id: '1', label: 'Apple' },
  { id: '2', label: 'Banana' },
];
el.itemKey = 'id';
el.addEventListener('items-change', (e) => {
  el.items = e.detail;
});

Imperative handle

Beyond props and events, SortableList 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:

React

import { useRef } from 'react';
import { SortableList, type SortableListHandle } from '@rozie-ui/sortable-list-react';

const sl = useRef<SortableListHandle>(null);
// <SortableList ref={sl} ... />
const order = sl.current?.toArray();
sl.current?.option('disabled', true);

Vue

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

<template>
  <SortableList ref="sl" />
  <button @click="console.log(sl.toArray())">Log order</button>
</template>

Svelte

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

<SortableList bind:this={sl} />
<button onclick={() => console.log(sl.toArray())}>Log order</button>

Angular

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(SortableList) sl!: SortableList;  // or the viewChild() signal
  logOrder() { console.log(this.sl.toArray()); }
  disable() { this.sl.option('disabled', true); }
}

Solid

import { SortableList, type SortableListHandle } from '@rozie-ui/sortable-list-solid';

let handle: SortableListHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<SortableList ref={(h) => (handle = h)} />;
const order = handle?.toArray();

Lit

// The custom element IS the handle — its exposed methods are public
// element methods.
const el = document.querySelector('rozie-sortable-list');
const order = el.toArray();
el.option('disabled', true);

See also

• SortableList — showcase & API — the full prop / event / slot / handle reference, theming, and accessibility.
• SortableList — live demo — the real package running in the page, plus the one .rozie source and all six generated outputs.