react-sortly

React nested sortable component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-sortly
103523.0.44 years ago6 years agoMinified + gzip package size for react-sortly in KB

Readme

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

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 (
    <div ref={ref} style={{ marginLeft: depth * 20 }}>
      {name}
    </div>
  );
};

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 (
    <Sortly items={items} onChange={handleChange}>
      {(props) => <ItemRenderer {...props} />}
    </Sortly>
  );
};

const App = () => (
 <DndProvider backend={HTML5Backend}>
   <ContextProvider>
     <MySortableTree />
   </ContextProvider>
 </DndProvider>
);

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);