react-draggable-order

React Draggable Order

Component for custom orderable list

Demo

Take a look here for a working demo.

Basic usage

import { OrderGroup, OrderItem, defaultTheme } from 'react-draggable-order';

// in your component

<OrderGroup {...defaultTheme.group}>
  {list.map((x, i) => (
    <OrderItem key={i}
               index={i}
               onMove={(to) => setList(arrayMove(list, i, to))}
               {...defaultTheme.item}>
      <OrderItem.Handle {...defaultTheme.handle}>
        grab me
      </OrderItem.Handle>
      <div {...defaultTheme.content}>
        {x}
      </div>
    </OrderItem>
  ))}
</OrderGroup>

How to style

React component

Example CSS

Advanced usage (using useOrder hook)

See here

Full example code

See here