https://github.com/ufocoder/tiny-sortable-list

Tiny react component for sortable list
https://github.com/ufocoder/tiny-sortable-list

drag-and-drop hacktoberfest react sortable-lists

Last synced: 3 months ago
JSON representation

Tiny react component for sortable list

• Host: GitHub
• URL: https://github.com/ufocoder/tiny-sortable-list
• Owner: ufocoder
• Created: 2021-08-22T14:52:50.000Z (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2023-09-24T16:28:05.000Z (over 2 years ago)
• Last Synced: 2025-04-12T12:08:11.389Z (about 1 year ago)
• Topics: drag-and-drop, hacktoberfest, react, sortable-lists
• Language: JavaScript
• Homepage:
• Size: 3.2 MB
• Stars: 13
• Watchers: 2
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
Tiny sortable list

==================

![Build](https://github.com/ufocoder/tiny-sortable-list/actions/workflows/build.yml/badge.svg)

React component for sortable list based on HTML [Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)

## Features

- No dependencies

- Mobile touch support

- Horizonal and vertical lists

## Usage

Minimal working example

```typescript

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) {

  const { item, isDragged, isDragItemInsertAfter, isDragItemInsertBefore } = props

  return (

    


        {item.title}

    

  )

}


function App() {

  const [items, setItems] = useState([

    { title: 'item #1'},

    { title: 'item #2'},

    { title: 'item #3'},

    { title: 'item #4'},

    { title: 'item #5'},

  ])

  return (

    

      {props => }

    

  )

};

```

## Demo

![demo](./demo.gif)

## Note

Component use [dragdroptouch](https://github.com/Bernardo-Castilho/dragdroptouch) pollyfill source under the hood