Get started with react-sortable-hoc CDN

MIT licensed

React-sortable-hoc is a Higher Order Component for implementing sortable functionality in React lists.

Tags:
  • react
  • reactjs
  • react-component
  • sortable
  • sortable-list
  • list
  • sortable list
  • smooth
  • animated
  • hoc
  • higher-order
  • component
  • drag-and-drop
  • sorting
  • javascript
  • front-end
  • dragging
  • grid
  • higher-order-component

Stable version

Copied!

How to start using react-sortable-hoc CDN


import React from 'react';
import SortableFunc from 'https://cdn.cdnhub.io/react-sortable-hoc/2.0.0/react-sortable-hoc.min.js';

const SortableList = SortableFunc(props => {
  return (
    <ul style={{ listStyleType: 'none', padding: 0 }}>
      {props.items.map((item, index) => (
        <li key={item.id}>
          {item.label}
          <button onClick={() => props.removeAt(index)}>Remove</button>
        </li>
      ))}
    </ul>
  );
}, { handle: '0.5* [transform]' });

const MyComponent = () => {
  const [items, setItems] = React.useState([
    { id: 1, label: 'Item 1' },
    { id: 2, label: 'Item 2' },
    { id: 3, label: 'Item 3' },
  ]);

  const handleRemoveAt = index => {
    setItems(prevItems => prevItems.filter((_, i) => i !== index));
  };

  return <SortableList items={items} removeAt={handleRemoveAt} />;
};

export default MyComponent;

All versions