drag-list-react v1.0.5

Drag-list-react

A HOC component of Drag&Drop,Touch enabled and Reordering list for React.

demo

Install

npm install drag-list-react --save

Usage

import React from 'react';
import DragList from 'drag-list-react';

// Notice: Every item in your data list must contains property 'id'.
// DragList component uses 'id' as the key of array.
const list=[
  {
    id:1,
    name:'Item1'
  },{
    id:2,
    name:'Item2'
  },{
    id:3,
    name:'Item3'
  },{
    id:4,
    name:'Item4'
  }
]

// list item
// Each properties in data list will be passed to the children
const listItem=({name})=>(
  <div className={styles.nameTag}>{name}</div>
)

// Placeholder when dragging items
// Props is necessary because placeholder will receive style props from component.
const Placeholder=(props)=>(
  <div className={styles.placeholder} {...props}></div>  
)

const App = () => {
  // Use placeholder
  const List = DragList(listItem,Placeholder);
  // Or not use placeholder
  // const List = DragList(listItem);
  return (
    <List  />
  )
};

API

Properties