Getting Started with React Sortable Component

Smart UI React targets React 18+ and current Node LTS for tooling; use TypeScript templates when you want typed props and events.

Demo source (Smart UI repo): react/source/sortable/overview/App.jsx

1 Create a Vite + React + TypeScript app

1. npm create vite@latest my-smart-app -- --template react-ts

2. cd my-smart-app

   then

   npm install

2 Install Smart UI for React

npm install smart-webcomponents-react

3 Import styles and render the component

Open src/App.tsx (or App.jsx if you chose JavaScript). The snippet below matches Smart UI React demos for this widget:

import 'smart-webcomponents-react/source/styles/smart.default.css';
import './App.css';
import React, { useRef } from "react";
import { CheckBox } from 'smart-webcomponents-react/checkbox';
import { Sortable } from 'smart-webcomponents-react/sortable';

const App = () => {
  const sortableRef = useRef(null);

  const handleChange = (event) => {
    const sortable = sortableRef.current;
    if (!sortable) return;

    if (event.detail.value) {
      sortable.dragMode = 'handle';
      sortable.handleVisibility = 'visible';
    } else {
      sortable.dragMode = 'item';
    }
  };

  return (
    <div>
      <em>Drag and drop to change list order</em>
      <Sortable
        id="sortable"
        items="li"
        ref={sortableRef}
      >
        <ol>
          <li>Strawberries</li>
          <li>Mango</li>
          <li>Watermelon</li>
          <li>Apples</li>
          <li>Bananas</li>
          <li>Grapes</li>
          <li>Pineapples</li>
          <li>Oranges</li>
          <li>Raspberries</li>
          <li>Peaches</li>
          <li>Cherries</li>
          <li>Kiwi</li>
          <li>Blueberries</li>
          <li>Pomegranate</li>
          <li>Lemons</li>
        </ol>
      </Sortable>
      <div className="options">
        <CheckBox onChange={handleChange} id="handle">
          <code>drag-mode="handle"</code>
        </CheckBox>
      </div>
    </div>
  );
};

export default App;

4 Run the dev server

npm run dev

Open the URL Vite prints (often http://localhost:5173/).

import type { Sortable, SortableProps } from 'smart-webcomponents-react/sortable';

Live demos

Supported stacks: Smart UI targets Angular 17+, React 18+, Vue 3+, Node 18 LTS, and evergreen browsers; pin exact package versions to your org policy.