React Sortly
Simple, lightweight and highly customizable dnd nested sortable React component based on React DnD
Supported to sort the tree, vertical list, horizontal list, table row and maybe more!
Installation
npm install --save react-sortly react-dnd react-dnd-html5-backend
Demo: https://lytc.github.io/react-sortly
API Documentation: https://lytc.github.io/react-sortly/api
Sample
;;;;; const ItemRenderer = { const data: name depth drag drop = props; const ref = React; ; return <div ref=ref style= marginLeft: depth * 20 > name </div> ;}; const MySortableTree = { const items setItems = React; const handleChange = { ; }; return <Sortly items=items onChange=handleChange> <ItemRenderer ...props /> </Sortly> ;}; const App = <DndProvider backend=HTML5Backend> <ContextProvider> <MySortableTree /> </ContextProvider> </DndProvider>; const rootElement = document;ReactDOM;