tsc-react-sortablejs

React component written in Typescript

Features

• Drag and Drop between lists
• Nested lists
• Calculates items in list automatically
• Full API of SortableJS
• Convenient SortableJS API via props
• Controlled and Uncontrolled components
• Sortable Utilities
• Compatible with third part UI libraries
• SortableJS Plugin Support

If you find any features lacking, create an issue and/or pull request.

Upgrading to Major Version +2.0.0

• onChange is now (list: any[], Sortable: SortableJS, evt: SortableEvent) => any from (order: string[], Sortable: SortableJS, evt: SortableEvent) => any. There is no need for you to sort out your own lists anymore.
• Controlled Components only. To use without managing much state, use a FunctionComponent and utilize the useState() hook provided by React.
• data-id is not required for each list item anymore, as the component will do this for you when the unique key (not the index) is provided. There is a warning message for this.
• Add event listeners via props, such as add={(evt) => console.log('I added an item from a different list to this list!)}

Caveats / Gotchas

• Add a list and use the onChange prop to update your state
• The default import should be ReactSortable by convention. Using Sortable will create a sortable instance and not be controlled by React.

Examples

Motivation

The motivation behind this project is to create a version of React SortableJs that infers types, for safety, intellisense and many other features that intergrate with the Typescript ecosystem.

It turns out that having type safety allowed for many of the features that were lacking in the +1.0.0 version to start working again, such as nested dragging.

The current officially suppported ES2015+ component does not support Typescript.

TODO

This component is still ready to be used, but is still under development and may lack some features. We will be adding these features soon.

• DOM Manipulation. Currently does not touch the DOM using functions such as evt.item.parentNode.delete. This will allow the component to be an uncontrolled component, which is currently not supported.
• More Props. The goal is to have this just like vue-draggable where all the features such as clone and sort are exposed via props. This can be added in the options, but having the API would look much nicer.
• Tests and CI. Would be nice to have this stuff automated. Not sure how to tes the intergration between components and draggable options