@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|| 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 <Sortable.Item> children.

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

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

Links

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