NOTICE: This library is being actively developed. Use with caution until a proper release has been published.
Collection of higher order components for constructing forms with Grommet UX
Forms can often be the most time consuming part of your project. Tons of state? :check: complex hierarchies of data? Yep, you get the point. What we found when we were building our forms was that the best method was to render the form from a data structure stored in your state tree and to alter that state through redux.
Here's an example from a recent project of ours.
This is the object that sits in the state in your redux store. It describes the form requirements declaratively.
export const settingsForm = {
title: 'Settings',
id: 'settings-form',
compact: false,
fields: [
{
label: 'Allow Layout',
htmlFor: 'layout',
type: 'CheckBox',
error: null,
help: 'Should the layout be editable in the cms?',
field: {
checked: false,
onChange: null,
id: 'layout',
name: 'layout'
}
}
]
};
// In your connected component
import GrommetForm from 'grommet-forms';
<GrommetForm form={this.props.settingsForm} />
We love JSX, but sometimes you just end up writing too much of it. The hope with this library is that you will save yourself some keystrokes. Pass the form renderer a blob of data describing the hierarchy of your form / fields and get back a rendered form whose state you will manage using redux.
All of the Grommet form components are supported. When you create your field object, set the type
property to one of the Grommet Form Field types.
Each object in your fields array must contain a type
and a value
property, along with FormField properties such as help
and label
. The fieldProps
object can contain any of the props that the field type supports, including functions. Refer to the Grommet Docs website for a list of supported props. You can also reference the source code to see the PropTypes (Flow Types) that we use internally.
If you want to use one of the built in form elements, i.e. input
or textarea
go right ahead! Just pass in an element in JSX as the type, as shown below
export const settingsForm = {
// ...
fields: [
{
label: 'Allow Layout',
htmlFor: 'layout',
type: <input />,
error: null,
help: 'Should the layout be editable in the cms?',
field: {
checked: false,
onChange: null,
id: 'layout',
name: 'layout'
}
}
]
};