Dendriform logo
dendriform
Build feature-rich data-editing React UIs with great performance and little code.
NPM
CI: Build Status
Maturity: Early Days
Coolness Reasonable
Looking for the docs or source code? Go to the github repo.

Demos

White flashes indicate regions of the page that React has re-rendered. You can see how performant Dendriform's rendering is by how localised these flashes are.

A quick example

This demonstrates a basic form with several fields, rendering, and array elements. Changes are subscribed to and logged to the console. docs >
pets

Dendriform instance outside of React

Dendriform instances can be kept outside of React. Notice how the state is preserved regardless of whether the component is mounted. docs >
Value: 1

Branching forms

Here .branch() is used to access parts of a data shapes, which are returned as their own smaller forms. Changes made to these smaller forms are also made to the original form. docs >
name: Benstreet: 123 Fake St

Rendering fields

The .render() function is used to render parts of a form into small performant components. The white flashes indicate regions of the page that React has re-rendered. You can see how performant Dendriform's rendering is by how localised these flashes are. docs >
Ben from 123 Fake St

Rendering with dependencies

This demonstrates how .render() can be forced to update in response to other prop changes. docs >
seconds: 0

Setting data

This demo shows how to set data in a form in various ways: by passing the value, by using an updater function, and by using an immer producer. docs >
123

Setting data with buffering

This demonstrates how multiple changes can be collected and applied at once. View the console to see how many changes are produced by each button click. docs >
123

ES6 classes

A demonstration of how to use ES6 classes with dendriform. docs >

ES6 maps

A demonstration of how to use ES6 maps with dendriform. docs >

Form inputs

Here different types of form input elements are bound to different forms. Note that useInput and useCheckbox are React hooks and as such must follow the rules of hooks. docs >

Subscribing to changes

Subscribing to changes using useChange(). Open the console to see these changes occur. docs >

Array operations

This shows how to use the array methods to manipulate arrays. If you're interested in rendering arrays of items, there is also a drag and drop demo that can provide a better user experience. docs >

Array indexes

This shows how to access array element indexes and respond to their changes. See how this incresases the amount of component updates required. docs >
Colour: Red, index: 0
Colour: Green, index: 1
Colour: Blue, index: 2

History

A simple demonstration of history with undo and redo. docs >

Grouping history items

Shows how you can control how changes are grouped within the history stack. Use any of the buttons, and then use undo and redo to see how the changes are grouped within history. docs >
value: a

Deriving data in a single form

The .useDerive() hook is used to set the value of one property in response to the value of other properties. docs >
full name:

Deriving data in another form

It is also possible and often preferrable to make changes in other forms in .onDerive()'s callback. Here we can see that deriving data can be useful for implementing validation. Try deleting all the characters in the name below. docs >
valid

Synchronising forms

When forms are synchronised with each other, their changes throughout history are also synchronised. Type in either input and use undo and redo to see how the two forms are connected. docs >

Synchronising forms with deriving

The useSync() hook can also accept a deriver to derive data in one direction. This has the effect of caching each derived form state in history, and calling undo and redo will just restore the relevant derived data at that point in history. docs >
names
occupants: 0

Drag and drop with react-beautiful-dnd

An example of how one might implement drag and drop with react-beautiful-dnd. Dendriform's .renderAll() function, and its automatic id management on array elements simplifies this greatly. docs >

Validation example

An example of how it's possible to perform validation on an array of items.
Errors:
  • None