MotionReorder

Drag to reorder a list or a grid, with keyboard support.

WebReact NativeLists

Try it

Preparing the example…

JavaScript is off. The code below is the complete example.

App.jsx

import { useState } from 'react';
import { MotionReorder } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const tracks = [
  { id: 'intro', title: 'Intro', length: '0:48' },
  { id: 'morning', title: 'Morning Light', length: '3:21' },
  { id: 'harbor', title: 'Harbor', length: '4:02' },
  { id: 'chorus', title: 'Chorus Line', length: '2:57' },
  { id: 'night', title: 'Night Drive', length: '5:10' },
  { id: 'outro', title: 'Outro', length: '1:15' },
];

export default function App({ reorder = 'live', layout = 'list' }) {
  const [items, setItems] = useState(tracks);

  return (
    <div className="stage">
      <MotionReorder
        className={`playlist ${layout}`}
        itemClassName="track"
        items={items}
        onItemsChange={setItems}
        getKey={(track) => track.id}
        reorder={reorder}
        layout={layout}
        columns={3}
        gap={8}
        renderItem={(track, { index, dragging }) => (
          <div className={dragging ? 'row dragging' : 'row'}>
            <span className="index">{index + 1}</span>
            <strong>{track.title}</strong>
            <span className="length">{track.length}</span>
          </div>
        )}
      />
      <p className="hint">Drag a handle, or focus it and use the arrow keys.</p>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px;
}

.track {
  display: flex;
  align-items: center;
  gap: 8px;
}

.track > button {
  flex: none;
  width: 36px;
  height: 44px;
  border: 1px solid #cfe8dc;
  border-radius: 10px;
  background: #f4faf7;
  color: #176b52;
  font-size: 18px;
}

.grid .track {
  flex-direction: column;
  align-items: stretch;
}

.grid .track > button {
  width: 100%;
  height: 32px;
}

.row {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 12px;
  background: #fff;
  user-select: none;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
}

.row.dragging {
  border-color: #176b52;
  box-shadow: 0 10px 24px rgba(14, 46, 36, 0.16);
}

.grid .row {
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 96px;
  text-align: center;
}

.index {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eaf6f0;
  color: #176b52;
  font:
    700 12px system-ui,
    sans-serif;
}

.row strong {
  flex: 1;
  color: #0e2e24;
}

.length {
  color: #5b616b;
  font-variant-numeric: tabular-nums;
}

.hint {
  margin: 0;
  color: #5b616b;
  font-size: 14px;
  text-align: center;
}

Shortest usage

Playlist.jsx

<MotionReorder
  items={tracks}
  onItemsChange={setTracks}
  layout="list"
  renderItem={(track) => track.title}
/>;

What it handles for you

Other items move out of the way while you drag (reorder="live") or once you drop (reorder="drop").
List and grid layouts with columns and gap.
Keyboard moves on the web, and accessibility actions on React Native.
Controlled with items and onItemsChange, or uncontrolled with defaultItems.

Use it for

A playlist.
A prioritized backlog.
A photo grid.

Props

Prop	Type	Default	Description
`items`	`readonly T[]`		The items, when you control the order.
`defaultItems`	`readonly T[]`	`[]`	Starting items, when the component keeps the order.
`onItemsChange`	`(items, { reason, key }) => void`		Runs with the new order and whether it came from a drag, a drop or the keyboard.
`getKey`	`(item) => string \| number`	`item`	Returns a unique key for an item. Defaults to the item itself.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Draws an item; receives its index and whether it is being dragged.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` moves other items while dragging; `drop` waits for the drop.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` or `grid`.
`columns`	`number`	`3`	Columns in a grid.
`gap`	`number`	`12`	Space between items in pixels.
`disabled`	`boolean`	`false`	Turns dragging off.
`duration`	`number`	`260`	Milliseconds for items moving out of the way.
`itemClassName`	`string`		Class for each item element; `itemStyle` sets its inline style.

Other props go to the rendered element, so className, style and event handlers work as usual.

Web and React Native

onItemsChange(items, { reason }) tells you whether a change came from a drag, a drop or the keyboard.

On React Native the same props apply and reordering is also offered as accessibility actions.