MotionReorder

Sleep om een lijst of raster te herordenen, met toetsenbordondersteuning.

WebReact NativeLijsten

Probeer het

Voorbeeld voorbereiden…

JavaScript staat uit. De code hieronder is het volledige voorbeeld.

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;
}

Kortste gebruik

Playlist.jsx

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

Wat het voor je regelt

Andere items gaan opzij terwijl je sleept (reorder="live") of zodra je loslaat (reorder="drop").
Lijst- en rasterlayouts met columns en gap.
Verplaatsen met het toetsenbord op het web, en toegankelijkheidsacties in React Native.
Gecontroleerd met items en onItemsChange, of ongecontroleerd met defaultItems.

Gebruik het voor

Een afspeellijst.
Een geprioriteerde backlog.
Een fotoraster.

Props

Prop	Type	Standaard	Beschrijving
`items`	`readonly T[]`		De items, als jij de volgorde beheert.
`defaultItems`	`readonly T[]`	`[]`	Startitems, als het component de volgorde bijhoudt.
`onItemsChange`	`(items, { reason, key }) => void`		Draait met de nieuwe volgorde en of die kwam van slepen, loslaten of het toetsenbord.
`getKey`	`(item) => string \| number`	`item`	Geeft een unieke key voor een item terug. Standaard het item zelf.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Tekent een item; krijgt de index en of het wordt gesleept.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` verplaatst andere items tijdens het slepen; `drop` wacht op het loslaten.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` of `grid`.
`columns`	`number`	`3`	Kolommen in een raster.
`gap`	`number`	`12`	Ruimte tussen items in pixels.
`disabled`	`boolean`	`false`	Zet slepen uit.
`duration`	`number`	`260`	Milliseconden voor items die opzij gaan.
`itemClassName`	`string`		Class voor elk item-element; `itemStyle` zet de inline style.

Andere props gaan naar het gerenderde element, dus className, style en event handlers werken zoals gewoonlijk.

Web en React Native

onItemsChange(items, { reason }) vertelt of een wijziging kwam van slepen, loslaten of het toetsenbord.

In React Native gelden dezelfde props en wordt herordenen ook aangeboden als toegankelijkheidsacties.