@simple-motion-dnd/grid

Documentaion

개요

@simple-motion-dnd/grid는 Motion의 Reorder 개념을 참고했지만, Reorder 컴포넌트는 수직, 수평 방향만 지원해서 그리드 형태도 가능하도록 구현했어요. 위치 정보를 저장하지 않고 드래그 시점에만 계산하는 경량 구조로 구현되었어요.
DOM API를 직접 활용해 정확한 충돌 감지와 부드러운 전환을 제공합니다.

설치

npm install @simple-motion-dnd/grid
# or
yarn add @simple-motion-dnd/grid

기본 사용 예시

import { MotionDnDGrid } from '@simple-motion-dnd/grid';
import { useState } from 'react';

export default function Example() {
  const [items, setItems] = useState([{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]);

  return (
    <MotionDnDGrid.Group items={items} onSorted={setItems} cols={2} gap={10}>
      {items.map((item) => (
        <MotionDnDGrid.Item key={item.id} itemId={item.id}>
          <div>{item.id}</div>
        </MotionDnDGrid.Item>
      ))}
    </MotionDnDGrid.Group>
  );
}

Props 요약

MotionDnDGrid.Group

| Prop | 설명 | | -------------- | ------------------------------------------- | | items | 재정렬할 아이템 배열 | | onSorted | 새로운 순서가 계산될 때 호출되는 콜백 | | cols | 한 줄의 열 개수 | | gap | 아이템 간 간격(px) | | layoutScroll | 스크롤 가능한 컨테이너에서 사용할 때 true |

MotionDnDGrid.Item

| Prop | 설명 | | -------- | ----------------------------------- | | itemId | 아이템의 고유 ID | | as | 렌더링할 HTML 태그 (기본값: 'li') |