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!
npm install --save react-sortly react-dnd react-dnd-html5-backend immutability-helper memoize-oneor
yarn add react-sortly react-dnd react-dnd-html5-backend immutability-helper memoize-oneDemo: https://lytc.github.io/react-sortly
API Documentation: https://lytc.github.io/react-sortly/api
importReactfrom'react';importReactDOMfrom'react-dom';import{DndProvider}from'react-dnd';importHTML5Backendfrom'react-dnd-html5-backend';importSortly,{ContextProvider,useDrag,useDrop}from'react-sortly';constItemRenderer=(props)=>{const{data: { name, depth }}=props;const[,drag]=useDrag();const[,drop]=useDrop();return(<divref={drop}><divref={drag}style={{marginLeft: depth*20}}>{name}</div></div>);};constMySortableTree=()=>{const[items,setItems]=React.useState([{id: 1,name: 'Priscilla Cormier',depth: 0},{id: 2,name: 'Miss Erich Bartoletti',depth: 0},{id: 3,name: 'Alison Friesen',depth: 1},{id: 4,name: 'Bernita Mayert',depth: 2},{id: 5,name: 'Garfield Berge',depth: 0},]);consthandleChange=(newItems)=>{setItems(newItems);};return(<Sortlyitems={items}onChange={handleChange}>{(props)=><ItemRenderer{...props}/>}</Sortly>);};constApp=()=>(<DndProviderbackend={HTML5Backend}><ContextProvider><MySortableTree/></ContextProvider></DndProvider>);constrootElement=document.getElementById('root');ReactDOM.render(<App/>,rootElement);