MotionReorder

सूची या ग्रिड का क्रम खींचकर बदलें, कीबोर्ड समर्थन के साथ।

वेबReact Nativeसूचियाँ

आज़माएँ

उदाहरण तैयार हो रहा है…

JavaScript बंद है। नीचे का कोड पूरा उदाहरण है।

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

सबसे छोटा इस्तेमाल

Playlist.jsx

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

यह आपके लिए क्या संभालता है

दूसरे आइटम खींचते समय (reorder="live") या छोड़ने पर (reorder="drop") रास्ते से हटते हैं।
columns और gap के साथ सूची और ग्रिड लेआउट।
वेब पर कीबोर्ड से हिलाना, और React Native में सुलभता एक्शन।
items और onItemsChange से नियंत्रित, या defaultItems से अनियंत्रित।

इसके लिए इस्तेमाल करें

प्लेलिस्ट।
प्राथमिकता वाला बैकलॉग।
फ़ोटो ग्रिड।

Props

Prop	टाइप	डिफ़ॉल्ट	विवरण
`items`	`readonly T[]`		आइटम, जब क्रम आप नियंत्रित करें।
`defaultItems`	`readonly T[]`	`[]`	शुरुआती आइटम, जब क्रम कंपोनेंट रखे।
`onItemsChange`	`(items, { reason, key }) => void`		नए क्रम के साथ चलता है, और बताता है कि वह ड्रैग, ड्रॉप या कीबोर्ड से आया।
`getKey`	`(item) => string \| number`	`item`	आइटम के लिए अद्वितीय key लौटाता है। डिफ़ॉल्ट रूप से आइटम ख़ुद।
`renderItem`	`(item, { index, dragging }) => ReactNode`	`item.label`	आइटम बनाता है; उसे अपना index और खींचा जा रहा है या नहीं, मिलता है।
`reorder`	`'live' \| 'drop'`	`'live'`	`live` खींचते समय दूसरे आइटम हिलाता है; `drop` छोड़ने का इंतज़ार करता है।
`layout`	`'list' \| 'grid'`	`'grid'`	`list` या `grid`।
`columns`	`number`	`3`	ग्रिड में कॉलम।
`gap`	`number`	`12`	आइटम के बीच पिक्सेल में जगह।
`disabled`	`boolean`	`false`	खींचना बंद करता है।
`duration`	`number`	`260`	रास्ते से हटते आइटम के लिए मिलीसेकंड।
`itemClassName`	`string`		हर आइटम एलिमेंट की class; `itemStyle` उसकी inline स्टाइल तय करता है।

बाक़ी props रेंडर होने वाले एलिमेंट को जाते हैं, इसलिए className, style और इवेंट हैंडलर सामान्य रूप से काम करते हैं।

वेब और React Native

onItemsChange(items, { reason }) बताता है कि बदलाव ड्रैग, ड्रॉप या कीबोर्ड से आया।

React Native में वही props लागू होते हैं और क्रम बदलना सुलभता एक्शन के रूप में भी मिलता है।