ParcelDrag

import ParcelDrag from 'react-dataparcels-drag';

Dataparcels' drag plugin provides an easy way to add drag and drop sorting to arrays of items. It uses react-sortable-hoc to perform the dragging and sorting, and all of react-sortable-hocs API is accessible to use via ParcelDrag.

Example usage

Please refer to the UI Behaviour page to see a full example.

import React from 'react';
import useParcelState from 'react-dataparcels/useParcelState';
import ParcelBoundary from 'react-dataparcels/ParcelBoundary';
import ParcelDrag from 'react-dataparcels-drag';

export default function FruitListEditor(props) {

    let [fruitListParcel] = useParcelState({
        value: [
            "Apple",
            "Banana",
            "Crumpets"
        ]
    });

    return <div>
        <ParcelDrag parcel={fruitListParcel}>
            {(fruitParcel) => <ParcelBoundary parcel={fruitParcel}>
                {(parcel) => <div>
                    <input type="text" {...parcel.spreadDOM()} />
                    <button onClick={() => parcel.insertAfter(`${parcel.value} copy`)}>+</button>
                    <button onClick={() => parcel.delete()}>x</button>
                </div>}
            </ParcelBoundary>}
        </ParcelDrag>
        <button onClick={() => fruitListParcel.push("New fruit")}>Add new fruit</button>
    </div>;
}

Children

childRenderer

(parcel: Parcel) => Node

ParcelDrag must be given a childRenderer function as children. This is called when rendering each child element, passing the Parcel for each element.

• parcel : Parcel

  The Parcel for each element being rendered

Props

parcel

parcel: Parcel

The Parcel that will be sortable. This Parcel must be of type IndexedParcel, and an error will be thrown if it is not.

container

container: ComponentType<any> // optional, defaults to 'div'

The container element to render around the children. Defaults to 'div'.

...sortableElementProps

...sortableElementProps: any

Any additional props will be passed onto react-sortable-hoc's SortableContainer hoc, to allow configuration of how the dragging behaves.

Note that SortableContainer's onSortEnd prop is not required, as it's provided by ParcelDrag. If you pass an onSortEnd prop to ParcelDrag, it will fire immediately after the Parcel triggers its change request.