React Smooth Draggable List

smooth, mobile-friendly, draggable list component for react.

:star: Check out the Demo :star:

How to Use It

Install

This component can be installed with npm:

npm install react-smooth-draggable-list --save

Include

import List from 'react-smooth-draggable-list'

Examples

Simple Example:

const items = [1, 2, 3]
<List rowHeight={80}>{
  items.map(item => <List.Item>item {item}</List.Item>)
}</List>

Controlled Example:

class MyList extends React.Component {
  // order index starts at zero
  state = {order: [1, 0, 2]}

  render() {
    return (
      <List
        rowHeight={50}
        order={this.state.order}
        onReOrder={order => this.setState({order})}
      >
        <List.Item>item 1</List.Item>
        <List.Item>item 2</List.Item>
        <List.Item>item 3</List.Item>
      </List>
    )
  }
}

More:

You can find more examples in the demo source code.

Props

List:

Name|Type|Default|Description |:---|:---|:---|:--- order|array|null|order is optional - when it is not defined, the list will be uncontrolled. onReOrder|(order) => {}|null|The onReOrder callback is invoked every time a user changes the list order. order is a list of integers representing the order of items. rowHeight|integer|0|Required: RowHeight defines the height of each list item in pixels. rowWidth|integer|null|RowWidth defines the width of the list component in pixels. Width defaults to 100% of parent. gutter|number|null|Amount of space between list items in pixels. Defaults to 0.1 * props.rowHeight. springConfig|object|null|Drag animation control. Object has three keys. stiffness: optional, defaults to 300. damping: optional, defaults to 50. precision: optional, defaults to 0.05.

List.Item:

Name|Type|Default|Description |:---|:---|:---|:--- dragHandle|Component|null|Pass in a functional component. See DragHandle in demo source code for an example. disabled|boolean|false|Allows user to disable list items.

How to Contrubite

# install with dev dependencies
npm install react-smooth-draggable-list --save-dev
# run the dev server on port 2100
npm run dev

npm run dev will run a dev server with hot reloading enabled. The dev server runs at http://localhost:2100. Dev server source code is here.