@paprika/sortable
TypeScript icon, indicating that this package has built-in type declarations

4.0.1 • Public • Published

@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

Readme

Keywords

none

Package Sidebar

Install

npm i @paprika/sortable

Weekly Downloads

846

Version

4.0.1

License

MIT

Unpacked Size

41.8 kB

Total Files

15

Last publish

Collaborators

  • vkhimich
  • mikrotron
  • jamiek-galvanize
  • allison_cc