@paprika/sortable

Description

Sortable component creates a vertical list of items, that can be re-ordered with a mouse via dragging and dropping, or with the keyboard

Installation

``
yarn add @paprika/sortable
`

or with npm:

`
npm install @paprika/sortable
`

Props

$3

| Prop | Type | required | default | Description |
| --------------- | ---- | -------- | ------- | ----------------------------------------- |
| children | node | false | null | |
| hasNumbers | bool | false | true | Indicator to identify the number sequence |
| hasZebraStripes | bool | false | false | Add a background-color to all even rows |
| onChange | func | true | - | Callback when sorting |
| onRemove | func | false | null | Callback when deleting an item |

$3

| Prop | Type | required | default | Description |
| -------------- | ------ | -------- | -------------- | -------------------------------------------- |
| children | node | true | - | |
| handleElement | node | false | | Handle element, default is a handle icon |
| hasNumbers | bool | true | - | Indicator to identify the number sequence |
| index | number | true | - | Numerical representation of an item |
| isDragDisabled | bool | false | false | If drag action should be disabled on an item |
| onRemove | func | false | null | Callback when deleting an item |

Usage

For the most basic case, simply provide your items as children.

`js

Item One
Item Two
Item Three

`

Children of that are NOT will be ignored. A unique sortId is important to maintain the focus after an update.

When an item is moved, the onChange callback is invoked with result:

`js
{
source: 0,
destination: 2,
}
`

If the item was dropped outside of the component, then destination will be null.

For localized screen reader descriptions, use the ` provider component around this component or with your application.

Read more about the library used for this component, react-beautiful-dnd.

Links

- Storybook Showcase
- GitHub source code
- Create GitHub issue
- CHANGELOG