@paprika/sortable
v4.0.1
Published
Sortable component creates a vertical list of items, that can be re-ordered with a mouse via dragging and dropping, or with the keyboard
Downloads
2,114
Keywords
Readme
@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.