React Sortable Component

A customizable, touch-friendly sortable component for React.

👉 Live Demo

Installation

npm install react-sortify-component
# or
yarn add react-sortify-component

Usage

import React, { useState } from 'react';
import {Sortable, sortableArray } from 'react-sortify-component';
import 'react-sortify-component/Sortable.css';

const initialData = [
  { id: 1, content: <div>Item 1</div> },
  { id: 2, content: <div>Item 2</div> },
  { id: 3, content: <div>Item 3</div> },
];

export default function Example() {
  const [data, setData] = useState<sortableArray>(initialData);

  return (
    <Sortable
      data={data}
      onChange={setData}
    />
  );
}

Props

| Name | Type | Default | Description | |--------------------|-------------------------------------|-----------|---------------------------------------------| | data | sortableArray | required | Array of items to sort | | onChange | (newData: sortableArray) => void | required | Called when order changes | | animationDuration | number | 300 | Animation duration in ms | | customClass | string | | Custom class for container | | isSortable | boolean | true | Enable/disable sorting | | dragHandle | React.ReactNode | | Custom drag handle | | sortableItemClass | string | | Custom class for sortable items |

Need Help?

If you face any issues or have questions, you're welcome to raise an issue on GitHub.

License

MIT