# [React Sortly](https://lytc.github.io/react-sortly) Simple, lightweight and highly customizable dnd nested sortable React component based on [React DnD](https://github.com/react-dnd/react-dnd) Supported to sort the tree, vertical list, horizontal list, table row and maybe more! ## Installation ```bash npm install --save react-sortly react-dnd react-dnd-html5-backend ``` Demo: [https://lytc.github.io/react-sortly](https://lytc.github.io/react-sortly) API Documentation: [https://lytc.github.io/react-sortly/api](https://lytc.github.io/react-sortly/api) ## Sample ```js import React from 'react'; import ReactDOM from 'react-dom'; import { DndProvider } from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend'; import Sortly, { ContextProvider } from 'react-sortly'; const ItemRenderer = (props) => { const { data: { name, depth }, drag, drop } = props; const ref = React.useRef(null); drag(drop(ref)); return (

{name}

); }; const MySortableTree = () => { 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 }, ]); const handleChange = (newItems) => { setItems(newItems); }; return ( {(props) => } ); }; const App = () => ( ); const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement); ```

	Stars	Issues	Version	Updated	Created
react-dnd	20,521	440	16.0.1	2 years ago	10 years ago
react-sortly	103	52	3.0.4	4 years ago	6 years ago
react-treebeard	1,687	72	3.2.4	5 years ago	9 years ago
react-ui-tree	755	47	4.0.0	6 years ago	9 years ago

react-dnd vs react-sortly vs react-treebeard vs react-ui-tree

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past