tiny-sortable-list's Introduction

Tiny sortable list

React component for sortable list based on HTML Drag and Drop API

Features

No dependencies
Mobile touch support
Horizonal and vertical lists

Usage

Minimal working example

import { useState } from 'react'
import { SortableList, SortableItemProps } from 'tiny-sortable-list'

interface Item {
  title: string
}

const itemStyle = {
  padding: '20px 10px',
  background: 'white',
  border: '2px black solid'
};

function ItemVerticalComponent(props: SortableItemProps<Item>) {
  const { item, isDragged, isDragItemInsertAfter, isDragItemInsertBefore } = props

  return (
    <div
      style={{
        ...itemStyle,
        opacity: isDragged ? '0.3' : undefined,
        borderTopColor: isDragItemInsertBefore ? 'yellow' : 'black',
        borderBottomColor: isDragItemInsertAfter ? 'yellow' : 'black',
      }}>
        {item.title}
    </div>
  )
}

function App() {
  const [items, setItems] = useState<Item[]>([
    { title: 'item #1'},
    { title: 'item #2'},
    { title: 'item #3'},
    { title: 'item #4'},
    { title: 'item #5'},
  ])

  return (
    <SortableList items={items} setItems={setItems}>
      {props => <ItemVerticalComponent {...props} />}
    </SortableList>
  )
};

Demo

Note

Component use dragdroptouch pollyfill source under the hood

tiny-sortable-list's People

Contributors

Stargazers

Watchers

tiny-sortable-list's Issues

Improve README.md

Add examples with minimal and full props set

Get rid of pollyfill

I temporary copied DragDropTouch pollyfill to repo to support touch events on mobile, but I believe that touch support could be implemented in other way to reduce the size of package