npm package: @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
Author: @paprika
Latest version: 4.0.4

<!-- start: Autogenerated - do not modify -->

# @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

### Sortable

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

### SortableItem

| Prop           | Type   | required | default        | Description                                  |
| -------------- | ------ | -------- | -------------- | -------------------------------------------- |
| children       | node   | true     | -              |                                              |
| handleElement  | node   | false    | <HandleIcon /> | 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               |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## Usage

For the most basic case, simply provide your items as `<Sortable.Item>` children.

```js
<Sortable onChange={changeHandler}>
  <Sortable.Item sortId="1">Item One</Sortable.Item>
  <Sortable.Item sortId="2">Item Two</Sortable.Item>
  <Sortable.Item sortId="3">Item Three</Sortable.Item>
</Sortable>
```

Children of `<Sortable>` that are NOT `<Sortable.Item>` 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 `<L10n>` provider component around this component or with your application.

Read more about the library used for this component, [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd).

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/forms-sortable--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/Sortable/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/sortable%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/Sortable/CHANGELOG.md)