A library for editing data structures that works really well with React.

github | npm | api documentation

What is it?

Dataparcels lets you edit data structures in an extremely flexible, data-centric way.
It lets you traverse your data structures like Immutable.js does, but with added two-way data binding magic.

You can trigger changes to small parts of your data, and those changes will propagate back up and merge into the original data shape automatically. When your data is held in React state, this can form the basis of almost any interactive user interface you can think of.

It’s designed for use with React, and comes with components for easy state management and performant rendering. The heirarchical, componentized nature of React fits perfectly with the heirarchical, componentized nature of dataparcels.

See an example of dataparcels code in action.

Getting Started

Get started with dataparcels, installation instructions and a first example.



Parcel is a data container.

It's job is to hold your data, split it into smaller parts, and merge changes back together.

ParcelHoc is a React higher order component.

It's job is to provide a parcel as a prop, and to handle how the parcel binds to React props and lifecycle events.

ParcelBoundary is a React component.

It's job is to optimise rendering performance, and to optionally control the flow of parcel changes.

ParcelBoundaryHoc is a React higher order component.

It's job is to control the flow of parcel changes. It is the higher order component version of a ParcelBoundary.

See also: ChangeRequest, Action.

API Examples