React Sortable Component

A customizable, touch-friendly sortable component for React.

Installation

``bash npm install react-sortify-component

`or`


yarn add react-sortify-component


Usage

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

const initialData = [ { id: 1, content:

Item 1

 },
  { id: 2, content: Item 2
 },
  { id: 3, content: Item 3
 },
];
export default function Example() {
  const [data, setData] = useState(initialData);

return ( 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

or

yarn add react-sortify-component

Usage

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

const initialData = [
  { id: 1, content:

Item 1

},
{ id: 2, content:

Item 2

},
{ id: 3, content:

Item 3

},
];

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

  return (
          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 |