Component size, gzipped: 19kb

Drag and Drop List

Props

Style Overrides

items

['Item 1', 'Item 2', 'Item 3']

['Item 1', 'Item 2', 'Item 3']

removable

onChange

({oldIndex, newIndex}) =>
        setItems(newIndex === -1 ?
          arrayRemove(items, oldIndex) :
          arrayMove(items, oldIndex, newIndex))

({oldIndex, newIndex}) =>
        setItems(newIndex === -1 ?
          arrayRemove(items, oldIndex) :
          arrayMove(items, oldIndex, newIndex))

removableByMove

import * as React from "react";
import {
  List,
  arrayMove,
  arrayRemove
} from "baseui/dnd-list";

export default () => {
  const [items, setItems] = React.useState([
    "Item 1",
    "Item 2",
    "Item 3"
  ]);
  return (
    <List
      items={items}
      onChange={({ oldIndex, newIndex }) =>
        setItems(
          newIndex === -1
            ? arrayRemove(items, oldIndex)
            : arrayMove(items, oldIndex, newIndex)
        )
      }
    />
  );
}

import * as React from "react";
import {
  List,
  arrayMove,
  arrayRemove
} from "baseui/dnd-list";
export default () => {
  const [items, setItems] = React.useState([
    "Item 1",
    "Item 2",
    "Item 3"
  ]);
  return (
    <List
      items={items}
      onChange={({ oldIndex, newIndex }) =>
        setItems(
          newIndex === -1
            ? arrayRemove(items, oldIndex)
            : arrayMove(items, oldIndex, newIndex)
        )
      }
    />
  );
}

API

Allows users to create vertically sortable lists supporting drag and drop, touch or keyboard input.

When to use

When a user wants to change a collection order.

Accessibility

tab and shift+tab to focus items
space to lift or drop the item
j or arrow down to move the lifted item down
k or arrow up to move the lifted item up
escape to cancel the lift and return the item to its initial position

This component also supports iOS and Android browsers and screen readers.

Examples

Drag and Drop basic usage

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Drag and Drop stateful usage

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Drag and Drop with removable items

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Drag and Drop with varying heights

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Donec ornare.
Morbi malesuada id ante ac tincidunt. Phasellus at varius enim, fringilla pretium lorem. Integer placerat, est in aliquam tempus, ex urna hendrerit quam, eu sagittis nulla lorem eu magna.
Morbi nibh nunc.
Nunc consequat erat id ante mollis tincidunt in a nulla.

Drag and Drop with custom drag handle

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Drag and Drop with label override

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

API

Stateful List API

`initialState` `object` `= { items: [] }`

Initial state populated into the component

items  required ArrayNode

`stateReducer` `function` `= (type, nextState) => undefined`

Reducer function to manipulate internal state updates.

function $Values{ change: "change" }, 
items  required ArrayNode
, 
items  required ArrayNode
 => items  required ArrayNode

`removable` `boolean`

Set if the list items should be removable

`removableByMove` `boolean`

Set if the list items should be removable by dragging them far left or right

`onChange` `function`

Handler for when drag and drop is finished and order changed or item is deleted (newIndex would be -1 in that case)

newState  required ArrayNode
oldIndex number required 
newIndex number required 
targetRect  required ClientRect
 => mixed

`overrides` `object`

Root  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>$isDragged boolean required 
$isSelected boolean required 
$isRemovable boolean required 
$isRemovableByMove boolean required 
$isOutOfBounds boolean required 
$value  required Node
List  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>$isDragged boolean required 
$isSelected boolean required 
$isRemovable boolean required 
$isRemovableByMove boolean required 
$isOutOfBounds boolean required 
$value  required Node
Item  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>$isDragged boolean required 
$isSelected boolean required 
$isRemovable boolean required 
$isRemovableByMove boolean required 
$isOutOfBounds boolean required 
$value  required Node
DragHandle  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>$isDragged boolean required 
$isSelected boolean required 
$isRemovable boolean required 
$isRemovableByMove boolean required 
$isOutOfBounds boolean required 
$value  required Node
CloseHandle  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>$isDragged boolean required 
$isSelected boolean required 
$isRemovable boolean required 
$isRemovableByMove boolean required 
$isOutOfBounds boolean required 
$value  required Node
Label  { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>$isDragged boolean required 
$isSelected boolean required 
$isRemovable boolean required 
$isRemovableByMove boolean required 
$isOutOfBounds boolean required 
$value  required Node

DnD exports

You can import this module like so:

import {arrayMove} from 'baseui/dnd-list'

It exports the following components or utility functions: