New docs and examples are being built, and will be ready for version 2.0.0.

Until then there'll be very few examples and quite of lot of broken links. It'll all be fixed soon.

For now, here's how to edit a piece of data in React state:

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

export default function PersonEditor(props) {

    let [personParcel] = useParcelState({
        value: {
            firstname: "Robert",
            lastname: "Clamps",
            address: {
                postcode: "1234"
            }
        }
    });

    return <div>
        <label>firstname</label>
        <ParcelBoundary parcel={personParcel.get('firstname')}>
            {(firstname) => <input type="text" {...firstname.spreadDOM()} />}
        </ParcelBoundary>

        <label>lastname</label>
        <ParcelBoundary parcel={personParcel.get('lastname')}>
            {(lastname) => <input type="text" {...lastname.spreadDOM()} />}
        </ParcelBoundary>

        <label>postcode</label>
        <ParcelBoundary parcel={personParcel.getIn(['address', 'postcode'])}>
            {(postcode) => <input type="text" {...postcode.spreadDOM()} />}
        </ParcelBoundary>
    </div>;
};

Here's how to make a drag-and-drop editor for an array of objects:

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>;
}

And here's how to make a form that can submit:

import React from 'react';
import useParcelForm from 'react-dataparcels/useParcelForm';
import ParcelBoundary from 'react-dataparcels/ParcelBoundary';

const initialValue = {
    firstname: '',
    lastname: ''
};

export default function SignUpForm(props) {

    let [personParcel, personParcelControl] = useParcelForm({
        value: initialValue,
        onSubmit: (parcel) => saveMyData(parcel.value)
        // ^ returns a promise
    });

    return <div>
        <label>firstname</label>
        <ParcelBoundary parcel={personParcel.get('firstname')}>
            {(firstname) => <input type="text" {...firstname.spreadDOM()} />}
        </ParcelBoundary>

        <label>lastname</label>
        <ParcelBoundary parcel={personParcel.get('lastname')}>
            {(lastname) => <input type="text" {...lastname.spreadDOM()} />}
        </ParcelBoundary>

        <button onClick={() => personParcelControl.submit()}>Submit</button>
    </div>;
}

Installation

If you'd like to use dataparcels with React:

yarn add react-dataparcels # ...or npm install react-dataparcels --save

If you'd like to use dataparcels without React:

yarn add dataparcels # ...or npm install dataparcels --save

Beware that most of the examples on these docs assume that React is being used. If you'd like to use dataparcels core classes without React it's completely possible to do so; drop us a line if you do as we'd love to know about your use case.