Grid Forms integration for newforms.
- Product Form - the demo from the Grid Forms homepage rendered with newforms-gridforms.
newforms-gridforms can be used on the server, or bundled for the client using an npm-compatible packaging system such as Browserify or webpack.
npm install newforms-gridforms
The browser bundle exposes a global GridForms
variable and expects to
find global React
(React) and forms
(newforms) variables to work with.
You can find it in the /dist directory.
// Node only - a global GridForms variable is exported in the browser
var GridForms = require('newforms-gridforms')
// Components are exported as properties of GridForms
var {GridForm, Section, Row, Field} = GridForms
Nest <Section>
, <Row>
and <Field>
components under a <GridForm>
as
necessary.
Row spans will be calculated based on their Fields, so you only have to
specify span
props for fields which need more than the default of 1
.
Currently, GridForm
expects a form instance as a form
prop.
forms.RenderForm
will pass its form instance to a nested GridForm
, as will
each component all the way down to Field
- React's context feature will
obviate the need for the form
prop and this manual passing process once
facebook/react#2112 lands.
Product Form example:
<form>
<forms.RenderForm form={ProductForm}>
<GridForm>
<Section name="Add to inventory">
<Row>
<Field name="productName" span="3"/>
<Field name="tags"/>
</Row>
<Row>
<Field name="vendor"/>
<Field name="productType"/>
</Row>
<Row>
<Field name="productDescription"/>
</Row>
<Row>
<Field name="sku"/>
<Field name="initialStockLevel"/>
<Field name="costPrice"/>
<Field name="wholesalePrice"/>
<Field name="retailPrice"/>
</Row>
</Section>
</GridForm>
</forms.RenderForm>
</form>