@paprika/sortable

@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