MotionReorder

Faites glisser pour réordonner une liste ou une grille, clavier compris.

WebReact NativeListes

Essayer

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple complet.

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

Usage minimal

Playlist.jsx

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

Ce qu’il gère pour vous

Les autres éléments s’écartent pendant le glisser (reorder="live") ou au relâchement (reorder="drop").
Mises en page en liste et en grille avec columns et gap.
Déplacements au clavier sur le web, et actions d’accessibilité sur React Native.
Contrôlé avec items et onItemsChange, ou non contrôlé avec defaultItems.

À utiliser pour

Une playlist.
Un backlog priorisé.
Une grille de photos.

Props

Prop	Type	Défaut	Description
`items`	`readonly T[]`		Les éléments, quand vous contrôlez l’ordre.
`defaultItems`	`readonly T[]`	`[]`	Éléments de départ, quand le composant conserve l’ordre.
`onItemsChange`	`(items, { reason, key }) => void`		S’exécute avec le nouvel ordre et indique s’il vient d’un glisser, d’un dépôt ou du clavier.
`getKey`	`(item) => string \| number`	`item`	Renvoie une key unique pour un élément. Par défaut, l’élément lui-même.
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	Dessine un élément ; reçoit son index et s’il est en cours de glisser.
`reorder`	`'live' \| 'drop'`	`'live'`	`live` déplace les autres éléments pendant le glisser ; `drop` attend le dépôt.
`layout`	`'list' \| 'grid'`	`'grid'`	`list` ou `grid`.
`columns`	`number`	`3`	Colonnes d’une grille.
`gap`	`number`	`12`	Espace entre les éléments, en pixels.
`disabled`	`boolean`	`false`	Désactive le glisser.
`duration`	`number`	`260`	Millisecondes pour les éléments qui s’écartent.
`itemClassName`	`string`		Classe de l’élément de chaque item ; `itemStyle` définit son style en ligne.

Les autres props vont à l’élément rendu : className, style et les gestionnaires d’événements fonctionnent comme d’habitude.

Web et React Native

onItemsChange(items, { reason }) vous dit si un changement vient d’un glisser, d’un dépôt ou du clavier.

Sur React Native, les mêmes props s’appliquent et le réordonnancement est aussi proposé sous forme d’actions d’accessibilité.